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来 源 : 


e HTML 教程 
e CSS 教 程 
e Firebug 教 程 


整理 : 飞龙 


HTML 基础 


HTML 简介 


实例 


<html> 
<body> 


<hi>My First Heading</h1i> 
<p>My first paragraph.</p> 


</body> 
</html> 


什么 是 HTML ? 


HTML 是 用 来 描述 网 页 的 一 种 语言 。 


HTML 指 的 是 超 文 本 标记 语言 (Hyper Text Markup Language) 
HTML 不 是 一 种 编程 语言 ， 而 是 一 种 标记 语言 (markup language) 
标记 语言 是 一 套 标记 标签 (markup tag) 

HTML 使 用 标记 标签 来 描述 网 页 


HTML 标签 


HTML 标记 标签 通常 被 称 为 HTML 标签 (HTML tag)。 


HTML 标签 是 由 尖 括 号 包围 的 关键 词 ， 比如 <html> 

HTML 标签 通常 是 成 对 出 现 的 ， 比 如 <b> 和 </b> 

标签 对 中 的 第 一 个 标签 是 开始 标签 ， 第 二 个 标签 是 结束 标签 
开始 和 结束 标签 也 被 称 为 开放 标签 和 闭合 标签 


HTML 文档 = 网 页 


e HTML 文档 描述 网 页 
e HTML 文档 包含 HTML 标签 和 纯 文 本 
e HTML 文档 也 被 称 为 网 页 


Web 浏览 器 的 作用 是 读 取 HTML 文档 ， 并 以 网 页 的 形式 显示 出 它们 。 浏 览 器 不 会 
显示 HTML 标签 ， 而 是 使 用 标签 来 解释 页 面 的 内 容 : 


<html> 
<body> 


<hi>My First Heading</h1i> 


<p>My first paragraph.</p> 


</body> 
</html> 
例子 解释 
e <html> 与 </html> 之 间 的 文本 描述 网 页 
e <body> 与 </body> 之 间 的 文本 是 可 见 的 页 面 内 容 
e <h1> 与 </h1> 之 间 的 文本 被 显示 为 标题 
e <p> 与 </p> 之 间 的 文本 被 显示 为 段落 


基本 的 HTML 标签 - 四 个 实例 


本 章 通过 实例 向 您 演示 最 常用 的 HTML 标签 
提示 : 不 要 担心 本 章 中 您 还 没有 学 过 的 例子 ， 您 将 在 下 面 的 章节 中 学 到 它们 。 


提示 : 学 3] HTML 最 好 的 方式 就 是 边 学 边 做 实 验 。 我 们 为 您 准备 了 很 好 的 HTML 
编辑 器 。 使 用 这 个 编辑 器 ， 您 可 以 任意 编辑 一 段 HTML 源码 ， 然 后 单 击 TIY 按钮 来 
查看 结果 


HTML 标题 

HTML 标题 (Heading) 是 通过 <h1> - <h6> 等 标签 进行 定义 的 。 
实例 

K 


<h1>This is a heading</h1> 
<h2>This is a heading</h2> 
<h3>This is a heading</h3> 


HTML 段落 
HTML 段落 是 通过 <p> 标签 进行 定义 的 。 
实例 


<p>This is a paragraph.</p> 
<p>This is another paragraph.</p> 


HTML 链接 


HTML 链接 是 通过 <a> 标签 进行 定义 的 。 
实例 


<a href="http://www.w3school.com.cn">This is a link</a> 


注释 : 在 href 属性 中 指定 链接 的 地 址 。 


(您 将 在 本 教程 稍 后 的 章节 中 学 习 更 多 有 关 属 性 的 知识 ) 。 
HTML 图 像 
HTML 图 像 是 通过 <img> 标签 进行 定义 的 。 
实例 
<img src="w3school.jpg" width="104" height="142" /> 


注释 : 图 像 的 名 称 和 尺寸 是 以 属性 的 形式 提供 的 。 


HTML 元 素 


HTML 文档 是 由 HTML 元 素 定 义 的 。 


HTML 元 素 
HTML 元 素 指 的 是 从 开始 标签 (start tag) 到 结束 标签 (end tag) 的 所 有 代码 。 
开始 标签 元 素 内 容 结束 标签 
<p> This is a paragraph </p> 
«a href="defaultshtm" > This is a link </a> 


<br /> 


注释 : 开始 标签 常 被 称 为 开放 标签 (opening tag) ， 结 束 标签 常 称 为 闭合 标签 
(closing tag) 。 


HTML 元 素 语 法 


HTML 元 素 以 开始 标签 起 始 

HTML 元 素 以 结束 标签 终止 

元 素 的 内 容 是 开始 标签 与 结束 标签 之 间 的 内 容 

某 些 HTML 元 素 具 有 空 内 容 (empty content) 

空 元 素 在 开始 标签 中 进行 关闭 〈 以 开始 标签 的 结束 而 结束 ) 
大 多 数 HTML 元 素 可 拥有 属性 


提示 : 您 将 在 本 教程 的 下 一 章 中 学 习 更 多 有 关 属 性 的 内 容 。 


EH HTML 元 素 


大 多 数 HTML coMALRE (AUASH HTML 元 素 ) 。 
HTML 文档 由 旋 套 的 HTML 元 素 构 成 。 


HTML 文档 实例 


«html» 
«body» 
<p>This is my first paragraph.</p> 
«/body» 


«/html» 
上 面 的 例子 包含 三 个 HTML 元 素 。 


HTML 实例 解释 
<p> 元 来 : 
<p>This is my first paragraph.</p> 


这 个 <p> 元 素 定 义 了 HTML 文档 中 的 一 个 段落 。 
这 个 元 素 拥 有 一 个 开始 标签 <p>， 以 及 一 个 结束 标签 </p>。 
元 素 内 容 是 This is my first paragraph. 


<body> 元 素 : 


<body> 

<p>This is my first paragraph.</p> 

</body> 
<body> 元 素 定 义 了 HTML 文档 的 主体 。 
这 个 元 素 拥 有 一 个 开始 标签 <body>， 以 及 一 个 结束 标签 </body>. 
元 素 内 容 是 另 一 个 HTML TR (p TH) 。 


«html» 元 素 : 


«html» 
«body» 
<p>This is my first paragraph.</p> 
</body> 


</html> 


«html» 元 素 定义 了 整个 HTML 文档 。 
这 个 元 素 拥 有 一 个 开始 标签 <html>， 以 及 一 个 结束 标签 </html>, 
元 素 内 容 是 另 一 个 HTML 元 素 (body 元 素 ) 。 


不 要 忘记 结束 标签 
即使 您 忘记 了 使 用 结束 标签 ， 大 多 数 浏 览 器 也 会 正确 地 显示 HTML : 


<p>This is a paragraph 
<p>This is a paragraph 


上 面 的 例子 在 大 多 数 浏 览 器 中 都 没 问 题 ， 但 不 要 依赖 这 种 做 法 。 忘 记 使 用 结束 标签 
会 产生 不 可 预料 的 结果 或 错误 。 


注释 : 未 来 的 HTML 版 本 不 允许 省 略 结束 标签 。 


空 的 HTML 元 素 


没有 内 容 的 HTML 元 素 被 称 为 空 元 素 。 空 元 素 是 在 开始 标签 中 关闭 的 。 
<br> 就 是 没有 关闭 标签 的 空 元 素 (<br> 标签 定义 换行 ) 。 
在 XHTML, XML 以 及 未 来 版 本 的 HTML 中 ， 所 有 元 素 都 必须 被 关闭 。 


在 开始 标签 中 添加 斜 枉 ， 比 如 <br />， 是 关闭 空 元 素 的 正确 方法 ，HTML、XHTML 
和 XML 都 接受 这 种 方式 。 


即使 «br» 在 所 有 浏览 器 中 都 是 有 效 的， 但 使 用 <br /> 其 实 是 更 长 远 的 保障 。 


HTML 提示 : 使 用 小 宇 标签 


HTML 标签 对 大 小 写 不 敏感 : <P> SIF <p>。 许 多 网 站 都 使 用 大 写 的 HTML 标 
A 


SLO 


W3School 使 用 的 是 小 写 标 签 ， 因 为 万 维 网 联盟 (W3C) 在 HTML 4 中 推荐 使 用 小 
写 ， 而 在 未 来 (X)HTML 版 本 中 强制 使 用 小 写 。 


HTML 属性 


属性 为 HTML 元 素 提供 附加 信息 。 


HTML 属性 


HTML 标签 可 以 拥有 属性 。 属 性 提供 了 有 关 HTML 元 素 的 更 多 的 信息 。 
属性 总 是 以 名 称 / 值 对 的 形式 出 现 ， 比 如 : name="value", 
属性 总 是 在 HTML 元 素 的 开始 标签 中 规定 。 


属性 实例 
HTML 链接 由 <a> 标签 定义 。 链 接 的 地 址 在 href 属性 中 指定 : 


«a href="http://www.w3school.com.cn">This is a link</a> 


更 多 HTML 属性 实例 
属性 例子 1: 


<h1> 定义 标题 的 开始 。 
<h1 align="center"> 拥有 关于 对 齐 方式 的 附加 信息 。 
TIY : 居中 排列 标题 


属性 例子 2: 

<body> 定义 HTML 文档 的 主体 。 

«body bgcolor="yellow"> 拥有 关于 背景 颜色 的 附加 信息 。 
TIY : 背景 颜色 


属性 例子 3: 


<table> 定义 HTML 表格 。 (您 将 在 稍 后 的 章节 学 习 到 更 多 有 关 HTML 表格 的 内 
容 ) 


<table border="1"> 拥有 关于 表格 边框 的 附加 信息 。 


HTML 提示 : 使 用 小 写 属 性 
属性 和 属性 值 对 大 小 写 不 敏感 。 

不 过 ， 万 维 网 联盟 在 其 HTML 4 推荐 标准 中 推荐 小 写 的 属性 /属性 值 。 
而 新 版 本 的 (X)HTML 要 求 使 用 小 写 属性 。 


始终 为 属性 值 加 引号 
属性 值 应 该 始终 被 包括 在 引号 内 。 双 引号 是 最 常用 的 ， 不 过 使 用 单 引号 也 没有 问 


是 。 


在 某 些 个 别 的 情况 下 ， 上 比如 属性 值 本 身 就 含有 双 引 号 ， 那 么 您 必须 使 用 单 引 号 ， 例 
如 : 


name='Bill "Helloworld" Gates' 


HTML 属性 参考 手册 


我 们 的 完整 的 HTML 参考 手册 提供 了 每 个 HTML 元 素 可 使 用 的 合法 属性 的 完整 列 
AX: 


完整 的 HTML 参考 手册 
下 面 列 出 了 适用 于 大 多 数 HTML 元 素 的 属性 : 


属性 值 描述 

class classname 规定 元 素 的 类 名 (classname) 

id id 规定 元 素 的 唯一 

style style definition 规定 元 素 的 行内 样式 (inline style) 
规定 元 


title text 素 的 额外 信息 〈 可 在 工具 提示 中 显示 ) 


如 需 更 多 天 于 标准 属性 的 信息 ， 请 访问 : 
HTML 标准 属性 参考 手册 


HTML 标题 


在 HTML 文档 中 ， 标 题 很 重要 。 


HTML 标题 
标题 (Heading) 是 通过 <h1> - <h6> 等 标签 进行 定义 的 。 


<h1> 定义 最 大 的 标题 。<h6> 定义 最 小 的 标题 。 
实例 


<hi>This is a heading</h1> 
<h2>This is a heading</h2> 
<h3>This is a heading</h3> 


注释 : 3|» | 览 器 会 自动 地 在 标题 的 前 后 添加 空 行 。 


注释 : 默认 情况 下 ，HTML 会 自动 地 在 块 级 元 素 前 后 添加 一 个 额外 的 空 行 ， 比 如 段 
落 、 标 题 元 素 前 后 。 


标题 很 重要 

请 确保 将 HTML heading 标签 只 用 于 标题 。 不 要 仅仅 是 为 了 产生 粗 体 或 大 号 的 文本 
而 使 用 标 题 。 
搜索 引擎 使 用 标题 为 您 的 网 页 的 结构 和 内 容 编 制 索 引 。 


因为 用 户 可 以 通过 标题 来 快速 浏览 您 的 网 页 ， 所 以 用 标题 来 呈现 文档 结构 是 很 重要 
的 。 


应 该 将 h1 用 作 主 标题 (最 重要 的 ) ， 其 后 是 h2 (次 重要 的 ) ， 再 其 次 是 h3， 以 
此 类 推 。 


HTML 水 平 线 
<hr /> 标签 在 HTML 页 面 中 创建 水 平 线 。 
hr 元 素 可 用 于 分 隔 内 容 。 


实例 


<p>This is a paragraph</p> 
<hr /> 
<p>This is a paragraph</p> 
<hr /> 
<p>This is a paragraph</p> 


ee Nene gk eee et een 
办 法 ) 。 


HTML 注释 


可 以 将 注释 插入 HTML 代码 中 ， 这 样 可 以 提高 其 可 读 性 ， 使 代码 更 易 被 人 理解 。 浏 
览 器 会 忽略 注释 ， 也 不 会 显示 它们 。 


注释 是 这 样 写 的 : 
实例 
<!-- This is a comment --> 


注释 : 开始 括号 之 后 (左边 的 括号 ) 需要 紧 跟 一 个 叹 号 ， 结 束 括 号 之 前 (AWA 


提示 : 合理 地 使 用 注释 可 以 对 未 来 的 代码 编辑 工作 产生 帮助 。 


HTML 提示 - 如 何 查看 源 代 码 


您 一 定 鲁 经 在 看 到 某 个 网 页 时 惊叹 道 “WOW! 这 是 如 何 实现 的 ?? 
如 果 您 想 找到 其 中 的 奥秘 ， 只 需要 单 击 右键 ， 然 后 选择 “查看 源 文件 ”(IE) 或 “查看 


页 面 源 代码 ”(Firefox) ， 其 他 浏览 器 的 做 法 也 是 类 似 的。 这 么 做 会 打开 一 个 包含 页 
面 HTML 代码 的 窗口 。 


来 目 本 页 的 实例 


标题 
隐藏 的 注释 
水 平 线 


HTML 标签 参考 手册 


W3School 的 标签 参考 手册 提供 了 有 关 这 些 标题 及 其 属性 的 更 多 信息 。 
您 将 在 本 教程 下 面 的 章节 中 学 到 更 多 有 关 HTML 标签 和 属性 的 知识 。 


«html» 定义 HTML 文档 。 
<body> 定义 文档 的 主体 。 
<hi> to <h6> 定义 HTML 标题 
<hr> 定义 水 平 线 。 


slasa 定义 注释 。 


HTML 段落 


可 以 把 HTML 文档 分 割 为 若干 段落 。 


HTML 段落 


段落 是 通过 «p» 标签 定义 的 。 


<p>This is a paragraph</p> 
<p>This is another paragraph</p> 
注释 : 浏览 器 会 自动 地 在 段落 的 前 后 添加 空 行 。 (<p> 是 块 级 元 素 ) 
提示 : 使 用 空 的 段落 标记 <p></p> 去 插入 一 个 空 行 是 个 坏 习 惯 。 用 <br/> 标签 代 


ge! (但 是 不 要 用 <br /> 标签 去 创建 列表 。 不 要 着 急 ， 您 将 在 稍 后 的 篇 幅 学 习 到 
HTML 列表 。 ) 


不 要 忘记 结束 标签 
即使 忘 了 使 用 结束 标签 ， 大 多 数 浏 览 器 也 会 正确 地 将 HTML 显示 出 来 : 
实例 


<p>This is a paragraph 
<p>This is another paragraph 


上 面 的 例子 在 大 多 数 浏览 器 中 都 没 问 题 ， 但 不 要 依赖 这 种 做 法 。 忘 记 使 用 结束 标签 
会 产生 意 想 不 到 的 结果 和 错误 。 


注释 : 在 未 来 的 HTML 版 本 中 ， 不 允许 省 略 结束 标签 。 
提示 : 通过 结束 标签 来 关闭 HTML 是 一 种 经 得 起 未 来 考验 的 HTML. 编写 方法 。 清 


楚 地 标记 某 个 元 素 在 何 处 开始 ， 并 在 何 处 结束 ， 不 论 对 您 还 是 对 浏览 器 来 说 ， 都 会 
使 代码 更 容易 理解 。 


HTML 折 行 


如 果 您 希望 在 不 产生 一 个 新 段落 的 情况 下 进行 换行 (新 行 ) ， 请 使 用 <br /> 标签 : 


<p>This is<br />a para<br />graph with line breaks</p> 


«br /> 元 素 是 一 个 空 的 HTML 元 素 。 由 于 关闭 标签 没有 任何 意义 ， 因 此 它 没有 结束 


<br> 还 是 <br /> 


您 也 许 发 现 <br> 与 <br /> 很 相似 。 


f£ XHTML, XML 以 及 未 来 的 HTML 版 本 中 ， 不 允许 使 用 没有 结束 标签 (闭合 标 
A) 的 HTML 元 素 。 


即使 <br> 在 所 有 浏览 器 中 的 显示 都 没有 问题 ， 使 用 <br /> 也 是 更 长 远 的 保障 。 


HTML 输出 - 有 用 的 提示 
我 们 无 法 确定 HTML 被 显示 的 确切 效果 。 屏 幕 的 大 小 ， 以 及 对 窗口 的 调整 都 可 能 
致 不 同 的 结果 。 


对 于 HTML， 您 无 法 通过 在 HTML 代码 中 添加 额外 的 空格 或 换行 来 改变 输出 的 效 
R, 

当 显示 页 面 时 ， 浏 览 器 会 移 除 源 代 码 中 多 余 的 空格 和 空 行 。 所 有 连续 的 空格 或 空 行 
都 会 被 算 作 一 个 空格 。 需 要 注意 的 是 ，HTML 代码 中 的 所 有 连续 的 空 行 (换行) 也 
被 显示 为 一 个 空格 。 


(这 个 例子 演示 了 一 些 HTML 格式 化 方面 的 问题 ) 


来 目 本 页 的 实例 


HTML 段落 

换行 

在 HTML 代码 中 的 排版 一 首 唐 诗 
更 多 实例 

更 多 段落 

HTML 标签 参考 手册 


W3School 的 标签 参考 手册 提供 了 有 关 HTML 元 素 及 其 属性 的 更 多 信息 。 


W3School Html & Css 教程 


<p> 


<br = 


HTML 段落 


定义 段落 。 
插入 单个 折 行 (换行 ) 。 
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HTML 文本 格式 化 


HTML 可 定义 很 多 供 格 式 化 输出 的 元 素 ， 比 如 粗 体 和 斜体 字 。 
下 面 有 很 多 例子 ， 您 可 以 亲自 试 试 : 


HTML 文本 格式 化 实例 
文本 格式 化 


&lt;html&gt; 

&lt;body&gt; 

&lt;b&gt;This text is bold&lt;/b&gt; 

&lt;br /&gt; 

&lt;strong&gt;This text is strong&lt;/strong&gt; 
&lt;br /&gt; 

&lt;big&gt;This text is big&lt;/big&gt; 
&lt;br /&gt; 

&lt;em&gt;This text is emphasized&lt;/em&gt; 
&lt;br /&gt; 

&lt;i&gt;This text is italic&lt;/i&gt; 

&lt;br /&gt; 

&lt;small&gt;This text is small&lt;/small&gt; 
&lt;br /&gt; 


This text contains 
&lt;sub&gt;subscript&lt;/sub&gt; 


&lt;br /&gt; 


This text contains 
&lt;sup&gt;superscript&lt;/sup&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


预 格式 文本 


&lt;html&gt; 
&lt;body&gt; 


&lt;pre&gt; 

这 是 

预 格式 文本 。 

它 保留 了 空格 
和 换行 。 
&lt;/pre&gt; 


&lt;p&gt;pre MARBALHTAMN :&lt;/p&gt; 


&lt;pre&gt; 

for i- 1 to 10 
print i 

next i 

&lt;/pre&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


“计算 机 输出 ?标签 


&lt;html&gt; 
&lt;body&gt; 


&lt;code&gt;Computer code&lt;/code&gt; 
&lt;br /&gt; 

&lt;kbd&gt;Keyboard input&lt;/kbd&gt; 
&lt;br /&gt; 

&lt;tt&gt;Teletype text&lt;/tt&gt; 
&lt;br /&gt; 

&lt;samp&gt;Sample text&lt;/samp&gt; 
&lt;br /&gt; 

&lt;var&gt;Computer variable&lt;/var&gt; 
&lt;br /&gt; 


&lt;p&gt; 

&1t ; b&gt ;注释 : &1lt;/b&gt; 这 些 标签 常用 于 显示 计算 机 /编程 代码 。 
&lt;/p&gt; 

&lt;/body&gt; 

&lt;/html&gt; 


地 址 


&lt; DOCTYPE html&gt; 
&lt;html&gt; 
&lt;body&gt; 


&lt;address&gt; 

Written by &lt;a href="mailto:webmaster@example.com"&gt;Donald Ducl 
Visit us at:&lt;br&gt; 

Example.com&lt;br&gt; 

Box 564, Disneyland&lt;br&gt; 

USA 

&lt;/address&gt; 


&lt;/body&gt; 
&lt;/html&gt; 





&lt;html&gt; 

&lt;body&gt; 

&lt;abbr title-"etcetera"&gt;etc.&lt;/abbr&gt; 

&lt;br /&gt; 

&lt;acronym title="World Wide Web"&gt;WWW&lt;/acronym&gt; 
&lt;p&gt; 在 某 些 浏览 器 中 ， 当 您 把 鼠标 移 至 缩 略 词语 上 时 ，tit1e 可 用 于 展示 表达 的 完 
&1t;p&gt; 仅 对 于 IE 5 中 的 acronym TRAM. &lt;/p&gt; 


&lt;p&gt; 对 于 Netscape 6.2 中 的 abbr 和 acronym 元 素 都 有 效 。&1t;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 





&lt;html&gt; 

&lt;body&gt; 

&lt;abbr title-"etcetera"&gt;etc.&lt;/abbr&gt; 

&lt;br /&gt; 

&lt;acronym title="World Wide Web"&gt;WWW&lt;/acronym&gt; 
&lt;p&gt; 在 某 些 浏览 器 中 ， 当 您 把 鼠标 移 至 缩 略 词语 上 时 ，tit1le 可 用 于 展示 表达 的 完 
&1t;p&gt; 仅 对 于 IE 5 中 的 acronym TRAM. &lt;/p&gt; 

&lt;p&gt; 对 于 Netscape 6.2 中 的 abbr 和 acronym 元 素 都 有 效 。&1t;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


H|rrcfcoac ———— — 1 
块 引用 





&lt;html&gt; 
&lt;body&gt; 


这 是 长 的 引用 : 

&lt;blockquote&gt; 

这 是 长 的 引用 。 这 是 长 的 引用 。 这 是 长 的 引用 。 这 是 长 的 引用 。 这 是 长 的 引用 。 这 是 长 的 引 
&lt;/blockquote&gt; 


这 是 短 的 引用 : 
&lt;q&gt; 
这 是 短 的 引用 。 
&lt;/q&gt; 


&lt;p&gt; 
使 用 blockquote 元 素 的 话 ， 浏 览 器 会 插入 换行 和 外 边 距 ， 而 q 元 素 不 会 有 任何 特殊 的 
&lt;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


E Een 
删除 字 效 果 和 插入 字 效 果 





&lt;html&gt; 

&lt;body&gt; 

&lt;p&gt;—1]83 &lt;del&gt; —T&lt;/del&gt; &lt;ins&gt;-d-—&lt;/ins&gc 
&lt;p&gt; 大 多 数 浏 览 器 会 改写 为 删除 文本 和 下 划 线 文本 。&1lt;/p&gt ; 

&lt;p&gt ;一 些 老式 的 浏览 器 会 把 删除 文本 和 下 划 线 文本 显示 为 普通 文本 。&1Lt;/p&gt 


&lt;/body&gt; 
&lt;/html&gt; 


LLL — HB 





如 何 查 看 HTML 源码 

有 过 交 样 的 经 历 ， 当 你 看 到 一 个 很 棒 的 站 点 ， 你 会 很 相知 首开 发 人 员 是 如 人 
? 

你 有 没有 看 过 一 些 网 页 ， 并 且 想 知道 它 是 如 何 做 出 来 的 呢 ? 


要 揭示 一 个 网 站 的 技术 秘密 ， 其 实 很 简单 。 单 击 浏览 器 的 “查看 菜单， 选择 “查看 源 
文件 " 即 可 。 随 后 你 会 看 到 一 个 弹出 的 窗口 ， 窗 口内 就 是 实际 的 HTML 代码 。 


文本 格式 化 标签 


标签 描述 

<b> 定义 粗 体 文本 。 

<big> ELAS Fo 

<em> 定义 着 重文 字 。 

<i> 定义 斜体 字 。 

«small» 定义 小 号 字 。 

<strong> 定义 加 重 语气 。 

<sub> 定义 下 标 字 。 

<Sup> ELL. 

<ins> 定义 插入 字 。 

<del> 定义 删除 字 。 

<S> 不 赞成 使 用 。 使 用 «del» RE. 

<strike> 不 赞成 使 用 。 使 用 «del» RE., 

<u> 不 赞成 使 用 。 使 用 样式 (style) RË. 
“计算 机 输出 ”标签 

<code> 定义 计算 机 代码 。 

<kbd> 定义 键盘 码 。 

<Samp> 定义 计算 机 代码 样本 。 

ET 定义 打字 机 代码 。 

<var> 定义 变量 。 

<pre> 定义 预 格 式 文本 。 

<listing> 不 赞成 使 用 。 使 用 «pre» RE. 

<plaintext> 不 赞成 使 用 。 使 用 <pre> RE. 

<xmp> 不 赞成 使 用 。 使 用 «pre» RE. 


引用 、 引 用 和 术语 定义 


W3School Html & Css 教程 


标签 
<abbr> 
<acronym> 
<address> 
<bdo> 
<blockquote> 
<q> 
<cite> 


<dfn> 


延伸 阅读 : 
改变 文本 的 外 观 和 含义 


HTML 文本 格式 化 


义 长 的 引用 。 

义 短 的 引用 语 。 
义 引 用 、 引 证 。 
义 一 个 定义 项 目 。 


a at at RP BR Bb Bb nb 
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HTML 2 #4 a5 


使 用 Notepad 或 TextEdit 来 编写 HTML 


可 以 使 用 专业 的 HTML 编辑 器 来 编辑 HTML : 


e Adobe Dreamweaver 
e Microsoft Expression Web 
e CoffeeCup HTML Editor 


不 过 ， 我 们 同时 推荐 使 用 文本 编辑 器 来 学 习 HTML， 比 如 Notepad (PC) 或 
TextEdit (Mac)。 我 们 相信 ， 使 用 一 款 简单 的 文本 编辑 器 是 学 习 HTML 的 好 方法 。 


通过 记事 本 ， 依 照 以 下 四 步 来 创建 您 的 第 一 张 网 页 。 


步骤 一 : 启动 记事 本 


如 何 启 动 记事 本 : 
开始 

所 有 程序 

附件 

记事 本 


步骤 二 : 用 记事 本 来 编辑 HTML 


在 记事 本 中 键入 HTML 代码 : 


P 无 标题 - 记事 本 -lo| x} 
THE 编辑 EE) EEO BBW HRY 


«IDOCTYPE HTML» 
«html» 
«body» 


<h1> 我 的 第 一 个 标题 </h1> 
<p> 我 的 第 一 个 段落 。</p> 


</body> 
</html> 





Jk — : 保存 HTML 


在 记事 本 的 文件 菜单 选择 "另存 为 "。 


当 您 保存 HTML 文件 时 ， 既 可 以 使 用 .htm 也 可 以 使 用 .html 扩展 名 。 两 者 没有 区 
别 ， 完 全 根据 您 的 喜好 。 


在 一 个 容易 记忆 的 文件 夹 中 保存 这 个 文件 ， 上 比如 w3school。 


步骤 四 : 在 浏览 器 中 运行 这 个 HTML 文件 


启动 您 的 浏览 器 ， 然 后 选择 "文件 ”菜单 的 “打开 文件 " 命 伟 ， 或 者 直接 在 文件 夹 中 双击 
您 的 HTML 文件 。 


结果 应 该 类 似 这 样 : 





E: dL Windows Internet Explorer: - [Bl x} 
AEA Y [@e: \w3school\test.html -| *$| X [i 


P dir {Æ E: w3schooltest.html | 


我 的 第 一 个 标题 


我 的 第 一 个 段落 。 





HTML CSS 


rarest HTML4.0， 所 有 的 格式 化 代码 均 可 移出 HTML 文档 ， 然 后 移入 一 个 独立 
的 样式 o 


实例 


HTML 中 的 样式 


&lt;html&gt; 


&lt;head&gt; 

&lt;style type="text/css"&gt; 
h1 (color: red) 

p (color: blue) 
&lt;/style&gt; 

&lt;/head&gt; 


&lt;body&gt; 

&lt;hi&gt;header 1&1t;/hi&gt; 
&lt;p&gt;A paragraph.&lt;/p&gt; 
&lt;/body&gt; 


&lt;/html&gt; 


没有 下 划 线 的 链接 


到 


&lt;html&gt; 

&lt;head&gt; 

&lt;meta http-equiv="Content-Type" content="text/html; charset-gb2: 
&lt;meta http-equiv-"Content-Language" content-"zh-cn" /&gt; 
&lt;/head&gt; 


&lt;body&gt; 
&lt;a hrefz"/example/html/lastpage.html" style="text-decoration:nor 
这 是 一 个 链接 ! 


&lt;/a&gt; 


&lt;/body&gt; 
&lt;/html&gt; 











链接 到 一 个 外 部 样式 表 


&lt;html&gt; 

&lt;head&gt; 

&lt;link rel="stylesheet" type="text/css" hrefz'"/html/csstesti.css' 
&lt;/head&gt; 

&lt;body&gt; 

&1t ;hi&gt ;我 通过 外 部 样式 表 进 行 格式 化 。&1t; /hi&gt， 

&lt;p&gt;$Xt&—3£ ! &1t;/p&gt; 

&lt;/body&gt; 

&lt;/html&gt; 


SE 


如 何 使 用 样式 


当 浏 览 器 读 到 一 个 样式 表 ， 它 就 会 按照 这 个 样式 表 来 对 文档 进行 格式 化 。 有 以 下 三 
种 方式 来 插入 样式 表 : 


外 部 样式 表 


当 样 式 需 要 被 应 用 到 很 多 页 面 的 时 候 ， 外 部 样式 表 将 是 理想 的 选择 。 使 用 外 部 样式 
表 ， 你 就 可 以 通过 更 改 一 个 文件 来 改变 整个 站 点 的 外 观 。 





<head> 
<link rel="stylesheet" type="text/css" href="mystyle.css"> 
</head> 


内 部 样式 表 


当 单 个 文件 需要 特别 样式 时 ， 就 可 以 使 用 内 部 样式 表 。 你 可 以 在 head 部 分 通过 
<style> 标签 定义 内 部 样式 表 。 


<head> 


<style type="text/css"> 

body {background-color: red} 
p {margin-left: 20px} 
</style> 

</head> 


内 联 样式 


当 特殊 的 样式 需要 应 用 到 个 别 元 素 时 ， 就 可 以 使 用 内 联 样 式 。 使 用 内 联 样式 的 方法 
是 在 相关 的 标签 中 使 用 样式 属性 。 样 式 属性 可 以 包含 任何 CSS 属性 。 以 下 实例 显 
示 出 如 何 改变 段落 的 颜色 和 左 外 边 距 。 


<p style="color: red; margin-left: 20px"> 
This is a paragraph 
</p> 


访问 我 们 的 CSS 教程 ， 学 习 更 多 有 关 样 式 的 知识 。 


<style> 定义 样式 定义 。 

<link> 定义 资源 引用 。 

<div> 定义 文档 中 的 节 或 区 域 ( 块 级 ) 。 

<span> 定义 文档 中 的 行内 的 小 块 或 区 域 。 

pomme: 规定 文本 的 字体 、 字 体 尺 寸 、 字 体 颜 色 。 不 赞成 使 用 。 请 使 
用 样式 。 


<basefont> 定义 基准 字体 。 不 赞成 使 用 。 请 使 用 样式 。 
<center> 对 文本 进行 水 平 居中 。 不 赞成 使 用 。 请 使 用 样式 。 


HTML 链接 


HTML 使 用 超级 链接 与 网 络 上 的 另 一 个 文档 相连 。 
几乎 可 以 在 所 有 的 网 页 中 找到 链接 。 点 击 链接 可 以 从 一 张 页 面 跳 转 到 另 一 张 页 面 。 


实例 
创建 超级 链接 


&lt;html&gt; 
&lt;body&gt; 


&lt;p&gt; 
&lt;a href="/index.html"&gt; 本 文本 &1lt;/a&gt; 是 一 个 指向 本 网 站 中 的 一 个 页 


&lt;p&gt;&lt;a href="http://www.microsoft.com/"&gt; 本 文本 &lt;/a&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


a] _ E 
将 图 像 作为 链接 





&lt;html&gt; 


&lt;body&gt; 

&lt;p&gt; 

您 也 可 以 使 用 图 像 来 作 链 接 : 

&lt;a hrefz"/example/html/lastpage.html"&gt; 
&lt;img border="0" srcz"/i/eg buttonnext.gif" /&gt; 
&lt;/a&gt; 

&lt;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


(可 以 在 本 页 底 端 找到 更 多 实例 ) 


HTML 超 链 接 (链接 ) 


超 链 接 可 以 是 一 个 字 ， 一 个 词 ， 或 者 一 组 词 ， 也 可 以 是 一 幅 图 像 ， 您 可 以 点 击 这 些 
内 容 来 跳 转 到 新 的 文档 或 者 当前 文档 中 的 某 个 部 分 。 


当 您 把 鼠标 指针 移动 到 网 页 中 的 某 个 链接 上 时 ， 箭 头 会 变 为 一 只 小 手 。 
我 们 通过 使 用 <a> 标签 在 HTML 中 创建 链接 。 
有 两 种 使 用 <a> 标签 的 方式 : 


1. 通过 使 用 href 属性 - 创建 指向 另 一 个 文档 的 链接 
2. 通过 使 用 name 属性 - 创建 文档 内 的 书签 


延伸 阅读 : 什么 是 超 文 本 ? 
HTML 链接 语法 
链接 的 HTML 代码 很 简单 。 它 类 似 这 样 : 
<a href="url">Link text</a> 
href 属性 规定 链接 的 目标 。 
开始 标签 和 结束 标签 之 间 的 文字 被 作为 超级 链接 来 显示 。 
实例 
头 


<a href="http://www.w3school.com.cn/">Visit W3School</a> 


上 面 这 行 代 码 显 示 为 Visit W3School 
点 击 这 个 超 链 接 会 把 用 户 带 到 W3School 的 首页 。 
提示 : "链接 文本 " 不 必 一 定 是 文本 。 图 片 或 其 他 HTML 元 素 都 可 以 成 为 链接 。 


HTML 链接 - target 属性 
使 用 Target 属性 ， 你 可 以 定义 被 链接 的 文档 在 何 处 显示 。 
下 面 的 这 行 会 在 新 窗口 打开 文档 : 


«a href="http://www.w3school.com.cn/" target="_blank">Visit W3Schoxc 


J 





HTML 链接 - name 属性 


name 属性 规定 锚 (anchor) 的 名 称 。 


您 可 以 使 用 name 属性 创建 HTML 页 面 中 的 书签 。 
书签 不 会 以 任何 特殊 方式 显示 ， 它 对 读者 是 不 可 见 的 。 
当 使 用 命名 锚 (named anchors) 时 ， 我 们 可 以 创建 直接 跳 至 该 命名 锚 (比如 页 面 


中 某 个 小 节 ) 的 链接 ， 这 样 使 用 者 就 无 需 不 停 地 滚动 页 面 来 寻找 他 们 需要 的 信息 
了 。 


命名 错 的 语法 : 
<a name="_label_">4§ (显示 在 页 面 上 的 文本 ) </a> 

提示 : 锚 的 名 称 可 以 是 任何 你 喜欢 的 名 字 。 

提示 : 您 可 以 使 用 id 属性 来 替代 name 属性 ， 命 名 锚 同 样 有 效 。 

实例 

头 

首先 ， 我 们 在 HTML 文档 中 对 锚 进 行 命 名 (创建 一 个 书签 ) 


<a name="tips"> 基 本 的 注意 事项 - 有 用 的 提示 </a> 


然后 ， 我 们 在 同一 个 文档 中 创建 指向 该 锚 的 链接 : 


<a href="#tips"> 有 用 的 提示 </a> 


您 也 可 以 在 其 他 页 面 中 创建 指向 该 锚 的 链接 : 


«a href="http://www.w3school.com.cn/htm1l/html_links.asp#tips">A FAB 


在 上 面 的 代码 中 ， 我 们 将 # 符号 和 锚 名 称 添加 到 URL. 的 末端 ， 就 可 以 直接 链接 到 
tips 这 个 命名 锚 了 。 


具体 效果 : 有 用 的 提示 


基本 的 注意 事项 - 有 用 的 提示 : 


注释 : 请 始终 将 正 斜 杠 添加 到 子 文件 夹 。 假 如 这 样 书写 链接 : 
href="http://www.w3school.com.cn/html"， 就 会 向 服务 器 产生 两 次 HTTP 请 求 。 这 
是 因为 服务 器 会 添加 正 斜 杠 到 这 个 地 址 ， 然 后 创建 一 个 新 的 请 求 ， 就 像 这 样 : 
href="http://www.w3school.com.cn/html/". 





提示 : 命名 锚 经 常用 于 在 大 型 文档 开始 位 置 上 创建 目录 。 可 以 为 每 个 章节 赋予 一 个 
命名 锚 ， 然 后 把 链接 到 这 些 锚 的 链接 放 到 文档 的 上 部 。 如 果 您 经 常 访 问 百度 百科 ， 
您 会 发 现 其 中 几乎 每 个 词 条 都 采用 这 样 的 导航 方式 。 

提示 : 假如 浏览 器 找 不 到 已 定义 的 命名 锚 ， 那 么 就 会 定位 到 文档 的 顶端 。 不 会 有 错 
误 发 生 。 


更 多 实例 
在 新 的 浏览 器 窗口 打开 链接 


&lt;html&gt; 
&lt;body&gt; 
&lt;a href="http://www.w3school.com.cn/" target="_blank"&gt;Visit V 
&lLt;p&gt; 如 果 把 链接 的 target 属性 设置 为 "_blank"， 该 链接 会 在 新 窗口 中 打开 。t 
&lt;/body&gt; 
&lt;/html&gt; 
iJ = 3 
链接 到 同一 个 页 面 的 不 同位 置 





&lt;html&gt; 

&lt;body&gt; 

&lt;p&gt; 

&lt;a href="#C4"agt;4&4 Chapter 4, &lt;/a&gt; 
&lt;/p&gt; 


&lt;h2&gt;Chapter 1&1t;/h2&gt; 
&lt;p&gt;This chapter explains ba bla bla&lt;/p&gt; 


&lt;h2&gt;Chapter 2&1t;/h2&gt; 
&lt;p&gt;This chapter explains ba bla bla&lt;/p&gt; 


&lt;h2&gt;Chapter 3&lt;/h2&gt; 
&lt;p&gt;This chapter explains ba bla bla&lt;/p&gt; 


&lt;h2&gt;&lt;a name="C4"&gt;Chapter 4&1lt;/a&gt;&lt;/h2&gt; 
&lt;p&gt;This chapter explains ba bla bla&lt;/p&gt; 


&lt;h2&gt;Chapter 5&lt;/h2&gt; 
&lt;p&gt;This chapter explains ba bla bla&lt;/p&gt; 


&lt;h2&gt;Chapter 6&lt;/h2&gt; 
&lt;p&gt;This chapter explains 


&lt;h2&gt;Chapter 7&lt;/h2&gt; 
&lt;p&gt;This chapter explains 


&lt;h2&gt;Chapter 8&lt;/h2&gt; 
&lt;p&gt;This chapter explains 


&lt;h2&gt;Chapter 9&lt;/h2&gt; 
&lt;p&gt;This chapter explains 


&lt;h2&gt;Chapter 10&1t;/h2&gt; 
&lt;p&gt;This chapter explains 


&lt;h2&gt;Chapter 11&1t;/h2&gt; 
&lt;p&gt;This chapter explains 


&lt;h2&gt;Chapter 12&1t;/h2&gt; 
&lt;p&gt;This chapter explains 


&lt;h2&gt;Chapter 13&1t;/h2&gt; 
&lt;p&gt;This chapter explains 


&lt;h2&gt;Chapter 14&1t;/h2&gt; 
&lt;p&gt;This chapter explains 


&lt;h2&gt;Chapter 15&1t;/h2&gt; 
&lt;p&gt;This chapter explains 


&lt;h2&gt;Chapter 16&1t;/h2&gt; 
&lt;p&gt;This chapter explains 


&lt;h2&gt;Chapter 17&1t;/h2&gt; 
&lt;p&gt;This chapter explains 


&lt;/body&gt; 
&lt;/html&gt; 


跳出 框架 


ba 


ba 


ba 


ba 


ba 


ba 


ba 


ba 


ba 


ba 


ba 


ba 


bla 


bla 


bla 


bla 


bla 


bla 


bla 


bla 


bla 


bla 


bla 


bla 


bla&lt;/p&gt; 


bla&lt;/p&gt; 


bla&lt;/p&gt; 


bla&lt;/p&gt; 


bla&lt;/p&gt; 


bla&lt;/p&gt; 


bla&lt;/p&gt; 


bla&lt;/p&gt; 


bla&lt;/p&gt; 


bla&lt;/p&gt; 


bla&lt;/p&gt; 


bla&lt;/p&gt; 


&lt;html&gt; 
&lt;body&gt; 
&lt;p&gt; RIERA T 99 ? &1t ; /p&gt ; 


&lt;a hrefz"/index.html" 
target-" top"&gt;j&m d x8 !&lt;/a&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


创建 电子 邮件 链接 


&lt;html&gt; 

&lt;body&gt; 

&lt;p&gt; 

这 是 邮件 链接 : 

&lt;a href="mailto:someone@microsoft.com?subject=Hello%20again"&gt , 
&lt;/p&gt; 

&lt;p&gt; 

&1t ; b&gt ;注意 : &1t;/b&gt; 应 该 使 用 920 来 替换 单词 之 间 的 空格 ， 这 样 浏览 器 就 可 上 
&lt;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


sd = Be 
创建 电子 邮件 链接 2 





&lt;html&gt; 
&lt;body&gt; 


&lt;p&gt; 

这 是 另 一 个 mailto 链接 : 

&lt;a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft .( 
&lt;/p&gt; 


&lt;p&gt; 
&1t ; b&gt ;注意 : &lt;/b&gt; 应 该 使 用 %20 来 替换 单词 之 间 的 空格 ， 这 样 浏览 器 就 可 上 
&lt;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 





HTML 链接 标签 
标签 描述 
<a> 定义 锚 。 


延伸 阅读 
什么 是 超 文本 ? 


HTML 图 像 


通过 使 用 HTML， 可 以 在 文档 中 显示 图 像 。 


实例 
Awe 


&1t;!DOCTYPE HTML&gt; 
&lt;html&gt; 


&lt;body&gt; 

&lt;p&gt; 

一 幅 图 像 : 

&lt;img src="/i/eg_mouse.jpg" width="128" height="128" /&gt; 
&lt;/p&gt; 

&lt;p&gt; 

一 幅 动画 图 像 : 

&lt;img srcz"/i/eg cute.gif" width="50" height="50" /&gt; 
&lt;/p&gt; 

&1t ; p&gt ;请 注意 ， 插 入 动画 图 像 的 语法 与 插入 普通 图 像 的 语法 没有 区 别 。&1t; /p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


SSS SSS SS Un] 
从 不 同 的 位 置 插入 图 片 


&lt;html&gt; 

&lt;body&gt; 

&lt;p&gt; 

来 自 另 一 个 文件 夹 的 图 像 : 

&lt;img src="/i/ct_netscape.jpg" /&gt; 
&lt;/p&gt; 

&lt;p&gt; 

来 自 w3School.com.cn 的 图 像 : 

&lt;img src="img/w3school_logo_white.gif" /&gt; 
&lt;/p&gt; 

&lt;/body&gt; 

&lt;/html&gt; 

(可 以 在 本 页 底 端 找到 更 多 实例 。) 


Eua (<img>) 和 源 属 性 (Src) 
在 HTML, BIRA <img> 标签 定义 。 
<img> 是 空 标签 ， 意 思 是 说 ， 它 只 包含 属性 ， 并 且 没 有 闭合 标签 。 


要 在 页 面 上 显示 图 像 ， 你 需要 使 用 源 属 性 (src) 。src 指 "source"。 源 属性 的 值 是 
图 像 的 URL 地 址 。 


定义 图 像 的 语法 是 : 


<img src="url" /> 


URL 指 存储 图 像 的 位 置 。 如 果 名 为 "boat.gif" 的 图 像 位 于 www.w3school.com.cn 的 
images 目录 中 ， 那 么 其 URL 为 http://www.w3school.com.cn/images/boat.gif。 


浏览 器 将 图 像 显 示 在 文档 中 图 像 标签 出 现 的 地 方 。 如 果 你 将 图 像 标签 置 于 两 个 段落 
之 间 ， 那 么 浏览 器 会 首先 显示 第 一 个 段落 ， 然 后 显示 图 片 ， 最 后 显示 第 二 段 。 


蔡 换 文本 属性 (Alt) 


alt 属性 用 来 为 图 像 定义 一 捉 预 备 的 可 替换 的 文本 。 蔡 换文 本 属性 的 值 是 用 户 定义 
的 。 


<img src="boat.gif" alt="Big Boat"> 


在 浏览 器 无 法 载 人 图 像 时 ， 蔡 换文 本 属性 告诉 读者 她 们 失去 的 信息 。 此 时 ， 浏 览 器 
将 显示 这 个 替代 性 的 文本 而 不 是 图 像 。 为 页 面 上 的 图 像 都 加 上 蔡 换 文本 属性 是 个 好 
人 dlte 
常 用 的 。 


基本 的 注意 事项 - 有 用 的 提示 : 
假如 某 个 HTML 文件 包含 十 个 图 像 ， 那 么 为 了 正确 显示 这 个 页 面 ， 需 要 加 载 11 个 
文件 。 加 载 图 片 是 需要 时 间 的 ， 所 以 我 们 的 建议 是 : BAA. 


<a id="more_examples"> 更 多 实例 </a> 
背景 图 片 


&lt;html&gt; 

&lt;body backgroundz"/i/eg background.jpg"&gt; 
&lt;h3&gt; ET &lt;/h3&gt; 

&lt;p&gt;gif 和 jpg 文件 均 可 用 作 HTML HR. &lt;/p&gt; 
&lt;p&gt; 如 果 图 像 小 于 页 面 ， 图 像 会 进行 重复 。&1lLt;/p&gt; 
&lt;/body&gt; 


&lt;/html&gt; 


排列 图 片 


&lt;html&gt; 

&lt;body&gt; 

&1t ;h2&gt ;未 设置 对 齐 方 式 的 图 像 : &1t;/h2&gt; 

&lt;p&gt; 图像 &lt;img src ="/i/eg_cute.gif"&gt; 在 文本 中 &1lt;/p&gt; 
&1t ;h2&gt ;已 设置 对 齐 方 式 的 图 像 : &1t; /h2&gt; 

&lt;p&gt; 图像 &lt;img src="/i/eg_cute.gif" align="bottom"&gt; 在 文本 
&lt;pagt; 图像 &lt;img src ="/i/eg_cute.gif" align="middle"&gt; 在 文 ? 
&lt;p&gt; BR &lt;img src ="/i/eg_cute.gif" align="top"&gt; 在 文本 中 t 


&1t ; p&gt ;请 注意 ，bottom 对 齐 方式 是 默认 的 对 齐 方式 。&1t;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 





浮动 图 像 


&lt;html&gt; 
&lt;body&gt; 


&lt;p&gt; 

&lt;img src -"/i/eg cute.gif" align ="left"&gt; 

带 有 图 像 的 一 个 段落 。 图 像 的 align 属性 设置 为 "left"。 图 像 将 浮动 到 文本 的 左 侧 。 
&lt;/p&gt; 


&lt;p&gt; 

&lt;img src ="/i/eg_cute.gif" align ="right"&gt; 

带 有 图 像 的 一 个 段落 。 图 像 的 align 属性 设置 为 "right"。 图 像 将 浮动 到 文本 的 右 侧 。 
&lt;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


Rb I 
调整 图 像 尺 十 


&lt;html&gt; 

&lt;body&gt; 

&lt;img src="/i/eg_mouse. jpg" width="50" height-z"50"&gt; 

&lt;br /&gt; 

&lt;img src="/i/eg_mouse. jpg" width="100" height-"100"&gt; 

&lt;br /&gt; 

&lt;img src="/i/eg_mouse. jpg" width="200" height-"200"&gt; 
&lt;p&gt,; 通 过 改变 img 标签 的 "height" 和 "width" 属性 的 值 ， 您 可 以 放大 或 缩 


&lt;/body&gt; 
&lt;/html&gt; 


ABA SERA 





&lt;html&gt; 

&lt;body&gt; 

&1t ;p&gt; 仅 支持 文本 的 浏览 器 无 法 显示 图 像 ， 仅 仅 能 够 显示 在 图 像 的 "alt"” 属性 中 指 ; 
&lLt;p&gt'; 请 注意 ， 如 果 您 把 鼠标 指针 移动 到 图 像 上 ， 大 多 数 浏 览 器 会 显示 "alt" MA, 
&lt;img src="/i/eg goleft ,gif'" alt=" 向 左 转 " /&gt; 
&lt;p&gt; 如 果 无 法 显示 图 像 ， 将 显示 "alt" 属性 中 的 文本 : &Lt;/p&gt ; 

&lt;img src-"/i/eg golefti23.gif" alt=" 向 左 转 " /&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


LEE 
制作 图 像 链接 





&lt;html&gt; 


&lt;body&gt; 

&lt;p&gt; 

您 也 可 以 把 图 像 作为 链接 来 使 用 : 

&lt;a hrefz"/example/html/lastpage.html"&gt; 
&lt;img border="0" srcz"/i/eg buttonnext.gif" /&gt; 
&lt;/a&gt; 

&lt;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


创建 图 像 映 射 


图 


&lt;html&gt; 
&lt;body&gt; 


&lLt;p&gt'; 请 点 击 图 像 上 的 星球 ， 把 它们 放大 。&1lLt;/p&gt， 


&lt;img 

srcz"/i/eg planets.jpg" 
border="0" usemap="#planetmap" 
alt="Planets" /&gt; 


&lt;map name="planetmap" id-"planetmap"&gt; 


&lt;area 

shape="circle" 
coords="180,139,14" 

href z"/example/html/venus.html" 
target ="_blank" 

alt="Venus" /&gt; 


&lt;area 

shape="circle" 

coords="129, 161,10" 

href z'"/example/html/mercur.html" 
target ="_blank" 

alt="Mercury" /&gt; 


&lt;area 

shape="rect" 
coords="0,0,110, 260" 

href ="/example/html/sun. html" 
target ="_blank" 

alt="Sun" /&gt; 


&lt;/map&gt; 


&1lt;p&gt;&lt;b&agt ; ER : &lt;/b&gt;img 元 素 中 的 "usemap" 属性 引用 map 7 


&lt;/body&gt; 
&lt;/html&gt; 





把 图 像 转 换 为 图 像 映 射 


&lt; !DOCTYPE html&gt; 
&lt;html&gt; 


&lt;body&gt; 

&lLt;p&gt; 请 把 鼠标 移动 到 图 像 上 ， 看 一 下 状态 栏 的 坐标 如 何 变化 。&1lLt;/p&gt; 
&lt;a hrefz"/example/html/html ismap.html"&gt; 

&lt;img src="/i/eg_planets.jpg" ismap /&gt; 

&lt;/a&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


图 像 标签 


<img> 定义 图 像 。 
<map> 定义 图 像 地 图 。 
<area> 定义 图 像 地 图 中 的 可 点 击 区 域 。 


</table> 


HTML 表格 


你 可 以 使 用 HTML 创建 表格 。 


实例 


表格 


&lt;html&gt; 
&lt;body&gt; 


&1t ; p&gt ;每 个 表格 由 table 标签 开始 。&1t;/p&gt， 
&1t ; p&gt ;每 个 表格 行 由 tr 标签 开始 。&1t;/p&gt，; 
&1t ; p&gt ;每 个 表格 数据 由 td 标签 开始 。&1t;/p&gt，; 


&lt;h4&gt; —3J : &1t;/h4&gt; 

&lt;table border="1"&gt; 

&lt;tr&gt; 
&lt;td&gt;100&1t;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;h4&gt ;一 行 三 列 : &1t;/h4&gt; 

&lt;table border="1"&gt; 

&lt;tr&gt; 
&lt;td&gt;100&1t;/td&gt; 
&lt;td&gt;200&1t;/td&gt; 
&lt;td&gt;300&1t;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 

&1lt;h4&gt; 两 行 三 列 : &1t;/h4&gt; 

&lt;table border="1"&gt; 

&lt;tr&gt; 
&lt;td&gt;100&1t;/td&gt; 
&lt;td&gt;200&1t;/td&gt; 
&lt;td&gt;300&1t;/td&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;400&1t;/td&gt; 
&lt;td&gt;500&1t;/td&gt; 
&lt;td&gt;600&1lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


表格 边框 


&lt;html&gt; 
&lt;body&gt; 


&lt;h4&gt; 带 有 普通 的 边框 : &lt;/h4&gt; 

&lt;table border="1"&gt; 

&lt;tr&gt; 
&lt;td&gt;First&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;Second&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;h4&gt; 带 有 粗 的 边框 : &1t;/h4&gt， 

&lt;table border="8"&gt; 

&lt;tr&gt; 
&lt;td&gt;First&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;Second&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;h4&gt; 带 有 很 粗 的 边框 : &1t; /h4&gt; 

&lt;table border="15"&gt; 

&lt;tr&gt; 
&lt;td&gt;First&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;Second&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


(可 以 在 本 页 底 端 找到 更 多 实例 。) 


表格 


表格 由 <table> 标签 来 定义 。 每 个 表格 均 有 若干 行 〈 由 <tr> 标签 定义 ) ， 每 行 被 分 
割 为 若干 单元 格 (由 «td» 标签 定义 ) o FÈ td 指 表格 数据 (table data) ， 即 数据 
e 数据 单元 格 可 以 包 仿 文本、 图片、 列表、 上 段落、 表单 、 水 平 线 、 表 


<table border="1"> 
<tr> 

<td>row 1, cell 1</td> 
<td>row 1, cell 2</td> 
</tr> 

<tr> 

<td>row 2, cell 1</td> 
<td>row 2, cell 2</td> 
</tr> 

</table> 


在 浏览 器 显示 如 下 : 
row 1, cell 1 row 1, cell 2 


row 2, cell 1 row 2, cell 2 


表格 和 边框 属性 
如 果 不 定义 边框 属性 ， 表 格 将 不 显示 边框 。 有 时 这 很 有 用 ， 但 是 大 多 数 时 候 ， 我 们 
希望 显示 边框 。 
使 用 边框 属性 来 显示 一 个 带 有 边框 的 表格 : 

<table border="1"> 

<tr> 

<td>Row 1, cell 1</td> 

<td>Row 1, cell 2</td> 


</tr> 
</table> 


表格 的 表 头 


表格 的 表 头 使 用 «th» 标签 进行 定义 。 
大 多 数 浏 览 器 会 把 表 头 显示 为 粗 体 居中 的 文本 : 


«table border="1"> 
<tr> 

<th>Heading</th> 
<th>Another Heading</th> 
</tr> 

<tr> 

<td>row 1, cell 1</td> 
<td>row 1, cell 2</td> 
</tr> 

<tr> 

<td>row 2, cell 1</td> 
<td>row 2, cell 2</td> 
</tr> 

</table> 


在 浏览 器 显示 如 下 : 


Heading Another Heading 
row 1, cell 1 row 1, cell 2 
row 2, cell 1 row 2, cell 2 


表格 中 的 空 单 元 格 


在 一 些 浏览 器 中 ， 没 有 内 容 的 表格 单元 显示 得 不 太 好 。 如 果 某 个 单元 格 是 空 的 ( 没 
有 内 容 ) ， 浏 览 器 可 能 无 法 显示 出 这 个 单元 格 的 边框 。 


<table border="1"> 
<tr> 

<td>row 1, cell 1</td> 
<td>row 1, cell 2</td> 
</tr> 

<tr> 

<td></td> 

<td>row 2, cell 2</td> 
</tr> 

</table> 


浏览 器 可 能 会 这 样 显 示 : 





low 1, cell 1 row 1, cell 2 


row 2. cell 2 





注意 : 这 个 空 的 单元 格 的 边框 没有 被 显示 出 来 。 为 了 避免 这 种 情况 ， 在 空 单元 格 中 
添加 一 个 空格 占 位 符 ， 就 可 以 将 边框 显示 出 来 。 


<table border="1"> 
<tr> 

<td>row 1, cell 1</td> 
<td>row 1, cell 2</td> 
</tr> 

<tr> 

<td>&nbsp;</td> 
<td>row 2, cell 2</td> 
</tr> 

</table> 


在 浏览 器 中 显示 如 下 : 
row 1, cell 1 row 1, cell 2 


row 2, cell 2 


<a id2"more examples"» E Z & fjlj«/a» 


没有 边框 的 表格 


&lt;html&gt; 
&lt;body&gt; 


&lt;h4&gt ; 这 个 表格 没有 边框 : &1t; /h4&gt; 

&lt;table&gt; 

&lt;tr&gt; 
&lt;td&gt;100&1t;/td&gt; 
&lt;td&gt;200&1t;/td&gt; 
&lt;td&gt;300&lt;/td&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;400&1t;/td&gt; 
&lt;td&gt;500&lt;/td&gt; 
&lt;td&gt;600&1t;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;h4&gt; 这 个 表格 也 没有 边框 : &1lt;/h4&gt，; 

&lt;table border="0"&gt; 

&lt;tr&gt; 

&lt;td&gt;100&1t;/td&gt; 
&lt;td&gt;200&1t;/td&gt; 
&lt;td&gt;300&1t;/td&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;400&1t;/td&gt; 
&lt;td&gt;500&1lt;/td&gt; 
&lt;td&gt;600&1lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


表格 中 的 表 头 (Heading) 


&lt;html&gt; 
&lt;body&gt; 


&lt;h4&gt;zAX : &1t;/h4&gt; 

&lt;table border="1"&gt; 

&lt;tr&gt; 
&lt;th&gt;Zt£&lt;/th&gt; 
&lt;th&gt; &j£&lt;/th&gt; 
&lt;th&gt; &i£&lt;/th&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;Bill Gates&lt;/td&gt; 
&lt;td&gt;555 77 854&1t;/td&gt; 
&lt;td&gt;555 77 855&1t;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;h4&gt ;垂直 的 表 头 : &1t;/h4&gt; 
&lt;table border="1"&gt; 
&lt;tr&gt; 
&lt;th&gt;Zt£&lt;/th&gt; 
&lt;td&gt;Bill Gates&lt;/td&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;th&gt; &i£&lt;/th&gt; 
&lt;td&gt;555 77 854&1t;/td&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;th&gt; &i$£&lt;/th&gt; 
&lt;td&gt;555 77 855&1t;/td&gt; 
&lt;/tr&gt; 
&lt;/table&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


空 单元 格 


&lt;html&gt; 
&lt;body&gt; 


&lt;table border="1"&gt; 
&lt;tr&gt; 
&lt;td&gt;Some text&lt;/td&gt; 
&lt;td&gt;Some text&lt;/td&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;td&gt;&lt;/td&gt; 
&lt;td&gt;Some text&lt;/td&gt; 
&lt;/tr&gt; 
&lt;/table&gt; 


&1t ;p&gt ;正如 您 看 到 的 ， 其 中 一 个 单元 没有 边框 。 这 是 因为 它 是 空 的 。 在 该 单元 中 插入 - 
&1t ; p&gt ;我 们 的 技巧 是 在 单元 中 插入 一 个 no-breaking 空格 。&1t;/p&gt; 

&lt;p&gt;no-breaking 空格 是 一 个 字符 实体 。 如 果 您 不 清楚 什么 是 字符 实体 ， 请 阅读 : 
&lt;p&gt;no-breaking 空格 由 和 号 开始 ("&" )， 然 后 是 字符 "nbsp"， 并 以 分 号 结尾 


&lt;/body&gt; 
&lt;/html&gt; 


加 Eee 
带 有 标题 的 表格 





&lt;html&gt; 
&lt;body&gt; 
&1t ;h4&gt ;这 个 表格 有 一 个 标题 ， 以 及 粗 边框 : &1t; /h4&gt; 


&lt;table border="6"&gt; 
&lt;caption&gt; KA t+ Malt ; /caption&gt; 
&lt;tr&gt; 
&lt;td&gt;100&1t;/td&gt; 
&lt;td&gt;200&1t;/td&gt; 
&lt;td&gt;300&1t;/td&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;400&1t;/td&gt; 
&lt;td&gt;500&1lt;/td&gt; 
&lt;td&gt;600&1lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;/body&gt; 


跨行 或 跨 列 的 表格 单元 格 
&lt;html&gt; 
&lt;body&gt; 


&lt;h4&gt; 横 跨 两 列 的 单元 格 : &1t; /h4&gt ; 
&lt;table border="1"&gt; 
&lt;tr&gt; 
&lt;th&gt;Jt£&lt;/th&gt; 
&lt;th colspan="2"&gt; $j;£&lt;/th&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;td&gt;Bill Gates&lt;/td&gt; 
&lt;td&gt;555 77 854&1t;/td&gt; 
&lt;td&gt;555 77 855&1t;/td&gt; 
&lt;/tr&gt; 
&lt;/table&gt; 


&1t ; h4&gt ; 横 跨 两 行 的 单元 格 : &1t; /h4&gt ; 
&lt;table border="1"&gt; 
&lt;tr&gt; 
&lt;th&gt;Zt£&lt;/th&gt; 
&lt;td&gt;Bill Gates&lt;/td&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;th rowspanz"2"&gt; $;£&lt;/th&gt; 
&lt;td&gt;555 77 854&1t;/td&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;td&gt;555 77 855&1t;/td&gt; 
&lt;/tr&gt; 
&lt;/table&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


表格 内 的 标签 


&lt;html&gt; 
&lt;body&gt; 


&lt;table border="1"&gt; 
&lt;tr&gt; 

&lt;td&gt; 
&lt;p&gt ;这 是 一 个 段落 。&lLt;/p&gt:; 
&1lt;p&gt ;这 是 另 一 个 段落 。&1t;/p&gt; 

&lt;/td&gt; 

&1t ;td&gt ;这 个 单元 包含 一 个 表格 : 
&lt;table border="1"&gt; 
&lt;tr&gt; 

&lt;td&gt;A&lt;/td&gt; 
&lt;td&gt;B&lt;/td&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;C&lt;/td&gt; 
&lt;td&gt;D&lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 

&lt;/td&gt; 

&lt;/tr&gt; 
&lt;tr&gt; 

&lt ;td&gt ;这 个 单元 包含 一 个 列表 : 

&lt;ul&gt; 
&lt;li&gt;?75AR&lt;/li&gt; 
&lt;li&gt; &f&&lt;/li&gt; 
&lt;li&gt;Xx$£&lt;/li&gt; 

&lt;/ul&gt; 

&lt;/td&gt; 

&lt;td&gt;HELLO&lt;/td&gt; 

&lt;/tr&gt; 
&lt;/table&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


单元 格 边 距 (Cell padding) 


&lt;html&gt; 
&lt;body&gt; 


&lt;h4&gt;jx8 cellpadding: &lt;/h4&gt; 

&lt;table border="1"&gt; 

&lt;tr&gt; 

&lt;td&gt;First&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;Second&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;h4&gt; 8 cellpadding: &lt;/h4&gt; 

&lt;table borderz"1" 

cellpadding="10"&gt; 

&lt;tr&gt; 
&lt;td&gt;First&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;Second&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


单元 格 间距 (Cell spacing) 


&lt;html&gt; 
&lt;body&gt; 


&lt;h4&gt;j&8 cellspacing : &lt;/h4&gt; 

&lt;table border="1"&gt; 

&lt;tr&gt; 

&lt;td&gt;First&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;Second&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;h4&gt; 8 cellspacing: &lt;/h4&gt; 

&lt;table borderz"1" 

cellspacing-"10"&gt; 

&lt;tr&gt; 
&lt;td&gt;First&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;Second&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


向 表格 添加 背景 颜色 或 背景 图 像 


&lt;html&gt; 
&lt;body&gt; 


&lt;h4&gt; ERME : &1t;/h4&gt; 
&lt;table borderz"1" 
bgcolor="red"&gt; 

&lt;tr&gt; 
&lt;td&gt;First&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;Second&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&1t ;h4&gt ;背景 图 像 : &1t;/h4&gt; 
&lt;table border="1" 
background="/i/eg_bg_07.gif"&gt; 
&lt;tr&gt; 
&lt;td&gt;First&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;Second&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


向 表格 单元 添加 背景 颜色 或 者 背景 图 像 


&lt;html&gt; 
&lt;body&gt; 


&lt;ih4&gt ;单元 背景 : &1t;/h4&gt; 
&lt;table border="1"&gt; 
&lt;tr&gt; 
&lt;td bgcolor="red"&gt;First&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;td 
backgroundz"/i/eg bg 07.gif'&gt; 
Second&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 
&lt;/tr&gt; 
&lt;/table&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


在 表格 单元 中 排列 内 容 


&lt;html&gt; 
&lt;body&gt; 


&lt; table width="400" border="1"&gt; 
&lt;tr&gt; 
&lt;th align-"left"&gt;B€4E....&lt;/th&gt; 
&lt;th align-"right"&gt; —H&lt;/th&gt; 
&lt;th align-"right"&gt; —H&lt;/th&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;td align="left"&gt ; KAR&1t;/td&gt; 
&lt;td align="right"&gt;$241.10&1t;/td&gt; 
&lt;td align="right"&gt;$50.20&1t;/td&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;td align="left"&gt; 化 妆 品 &lt;/td&gt; 
&lt;td align="right"&gt;$30.00&1t;/td&gt; 
&lt;td align="right"&gt;$44.45&lt;/td&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;td align-"left"&gt; BW&lt;/td&gt; 
&lt;td align="right"&gt;$730.40&1t;/td&gt; 
&lt;td align="right"&gt;$650.00&1t; /td&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;th align="left"&gt; &it&lt;/th&gt; 
&lt;th align-"right"&gt;$1001.50&1lt;/th&gt; 
&lt;th align="right"&gt;$744.65&1t;/th&gt; 
&lt;/tr&gt; 
&lt;/table&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


框架 (frame) 属 性 


&lt;html&gt; 
&lt;body&gt; 


&lt;p&gt;&lt;b&gt;Est: &lt;/b&gt;frame 属性 无 法 在 Internet Explorer 


&lt;p&gt;Table with frame="box":&lt;/p&gt; 
&lt;table frame="box"&gt; 
&lt;tr&gt; 
&lt;th&gt;Month&lt;/th&gt; 
&lt;th&gt;Savings&lt;/th&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;td&gt;January&lt;/td&gt; 
&lt;td&gt;$100&1t;/td&gt; 


&lt;/tr&gt; 
&lt;/table&gt; 


&lt;p&gt;Table with frame-z"above":&lt;/p&gt; 
&lt;table frame="above"&gt; 

&lt;tr&gt; 
&lt;th&gt;Month&lt;/th&gt; 
&lt;th&gt;Savings&lt;/th&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;January&lt;/td&gt; 
&lt;td&gt;$100&lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;p&gt;Table with frame-z"below":&lt;/p&gt; 
&lt;table frame="below"&gt; 

&lt;tr&gt; 
&lt;th&gt;Month&lt;/th&gt; 
&lt;th&gt;Savings&lt;/th&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;January&lt;/td&gt; 
&lt;td&gt;$100&1t;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;p&gt;Table with frame="hsides":&lt;/p&gt; 
&lt;table frame="hsides"&gt; 

&lt;tr&gt; 
&lt;th&gt;Month&lt;/th&gt; 
&lt;th&gt;Savings&lt;/th&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;January&lt;/td&gt; 
&lt;td&gt;$100&lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;p&gt;Table with frame="vsides":&lt;/p&gt; 
&lt;table frame="vsides"&gt; 

&lt;tr&gt; 
&lt;th&gt;Month&lt;/th&gt; 
&lt;th&gt;Savings&lt;/th&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;January&lt;/td&gt; 
&lt;td&gt;$100&1t;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


二 B 


表格 标签 


表格 


<table> 
<caption> 
<th> 

SENS 

<td> 
<thead> 
<tbody> 
<tfoot> 
<col> 


<colgroup> 





Br 
EH 


定义 表格 

定义 表格 标题 。 

定义 表格 的 表 头 。 

定义 表格 的 行 。 

定义 表格 单元 。 

定义 表格 的 页 眉 。 

定义 表格 的 主体 。 

定义 表格 的 页 脚 。 

定义 用 于 表格 列 的 属性 。 
定义 表格 列 的 组 。 


HTML 列表 


HTML 支持 有 序 、 无 序 和 定义 列表 


实例 
无 序列 表 


&lt;html&gt; 
&lt;body&gt; 


&1t ;h4&gt ;一 个 无 序列 表 : &1t; /h4&gt ; 
&lt;ul&gt; 
&lt;li&gt;UWüBE&lt;/li&gt; 
&lt;li&gt;zk&lt;/li&gt; 
&lt;li&gt;4/FiD&lt;/li&gt; 
&lt;/ul&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


有 序列 表 


&lt; DOCTYPE html&gt; 
&lt;html&gt; 
&lt;body&gt; 


&lt;ol&gt; 
&lt;li&gt;UWüNEelt;/li&gt; 
&lt;li&gt;/FiD&lt;/li&gt; 
&lt;li&gt;zk&lt;/li&gt; 

&lt;/ol&gt; 


&lt;ol start="50"&gt; 
&lt;li&gt;UWüNE&lt;/li&gt; 
&lt;li&gt;4/FiD&lt;/li&gt; 
&lt;li&gt;zk&lt;/li&gt; 

&lt;/ol&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


(可 以 在 本 页 底 端 找 到 更 多 实例 。) 


无 序列 表 


无 序列 表 是 一 个 项 目的 列表 ， 此 列 项 目 使 用 粗 体 圆 点 (典型 的 小 黑 圆 图 ) 进行 标 


无 序列 表 始 于 <ul> 标签 。 每 个 列表 项 始 于 <li>。 


<ul> 
«li»Coffee«/li» 
<]1i>Milk</1li> 
</ul> 


浏览 器 显示 如 下 : 


e Coffee 
e Milk 


列表 项 内 部 可 以 使 用 段落 、 换 行 符 、 图 片 、 链 接 以 及 其 他 列表 等 等 。 


有 序列 表 


同样 ， 有 序列 表 也 是 一 列 项 目 ， 列 表 项 目 使 用 数字 进行 标记 。 
有 序列 表 始 于 <ol> 标签 。 每 个 列表 项 始 于 <li> 标签 。 


<ol> 
<li>Coffee</1li> 


<li>Milk</li> 
</ol> 


浏览 器 显示 如 下 : 


1. Coffee 
2. Milk 


列表 项 内 部 可 以 使 用 段落 、 换 行 符 、 图 片 、 链 接 以 及 其 他 列表 等 等 。 


定义 列表 
自 定 义 列表 不 仅仅 是 一 列 项 目 ， 而 是 项 目 及 其 注释 的 组 合 。 


自 定义 列表 以 «dl» 标签 开始 。 每 个 自 定义 列表 项 以 «dt» 开始 。 每 个 自 定义 列表 项 
的 定义 以 <dd> 开始 。 


«dl» 

<dt>Coffee</dt> 

<dd>Black hot drink</dd> 
<dt>Milk</dt> 

<dd>white cold drink</dd> 
«/dl» 


浏览 器 显示 如 下 : 

Coffee 

Milk 

定义 列表 的 列表 项 内 部 可 以 使 用 段落 、 换 行 符 、 图 片 、 链 接 以 及 其 他 列表 等 等 。 


<a id2"more _ examples"> 更 多 实例 </a> 
不 同类 型 的 无 序列 表 


&lt;html&gt; 
&lt;body&gt; 


&lt;h4&gt;Disc 项 目 符号 列表 : &1t;/h4&gt; 
&lt;ul type="disc"&gt; 
&lt;li&gt; BR&1t;/li&gt; 
&lt;li&gt; &f&&lt;/li&gt; 
&lt;li&gt; Hfx&lt;/li&gt; 
&lt;li&gt;fá-f&lt;/li&gt; 
&lt;/ul&gt; 


&lt;h4&gt;Circle 项 目 符号 列表 : &lt;/h4&gt; 
&lt;ul type="circle"&gt; 
&lt; li&gt; ®R&1t;/li&gt; 
&lt;li&gt; &f&&lt;/li&gt; 
&lt;li&gt; alt; /li&gt; 
&lt;li&gt;fá-f&lt;/li&gt; 
&lt;/ul&gt; 


&lt;h4&gt;Square 项 目 符号 列表 : &lt;/h4&gt; 
&lt;ul type-"square"&gt; 
&lt;li&gt;?75R&lt;/li&gt; 
&lt;li&gt; &f&&lt;/li&gt; 
&lt;li&gt; HTx&lt;/li&gt; 
&lt;li&gt;fá-f&lt;/li&gt; 
&lt;/ul&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


不 同类 型 的 有 序列 表 


&lt;html&gt; 
&lt;body&gt; 


&lt;ih4&gt ;数字 列表 : &1t;/h4&gt; 
&lt;ol&gt; 
&lt; li&gt; BR&1t;/li&gt; 
&lt;li&gt; &f&&lt;/li&gt; 
&lt;li&gt; 柠檬 &1lt;/1i&gt，; 
&]lt ;1i&gt ;桂子 &1lt;/1li&gt，; 
&lt;/ol&gt; 


&1t ;h4&gt ;字母 列表 : &1t;/h4&gt; 
&lt;ol type="A"&gt; 
&lt; li&gt; ®R&1t;/li&gt; 
&lt;li&gt; &f&&lt;/li&gt; 
&lt;li&gt; Htx&lt;/li&gt; 
&lt;li&gt;fá-f&lt;/li&gt; 
&lt;/ol&gt; 


&1t ;h4&gt ;小 写字 母 列表 : &1t;/h4&gt; 
&lt;ol type="a"&gt; 
&lt; li&gt; BR&1t;/li&gt; 
&lt;li&gt; &f&&lt;/li&gt; 
&lt;li&gt; alt; /li&gt; 
&lt;li&gt;fá-f&lt;/li&gt; 
&lt;/ol&gt; 


&1lt;ih4&gt ;罗马 字母 列表 : &1t; /h4&gt ; 
&lt;ol type="I"&gt; 
&lt;li&gt;?75R&lt;/li&gt; 
&lt;li&gt; &f&&lt;/li&gt; 
&lt;li&gt; Hx&lt;/li&gt; 
&lt;li&gt;fá-f&lt;/li&gt; 
&lt;/ol&gt; 


&lt;h4&gt;/ VE Y E FHIR : &1t; /h4&gt ; 
&lt;ol type="i"&gt; 
&lt;li&gt;?75R&lt;/li&gt; 
&lt;li&gt; &f&&lt;/li&gt; 
&lt;li&gt; Hx&lt;/li&gt; 
&lt;li&gt;fá-f&lt;/li&gt; 
&lt;/ol&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


PRE IIR 


&lt;html&gt; 
&lt;body&gt; 


&lt;h4&gt; —T ERE : &1t; /h4&gt; 
&lt;ul&gt; 
&lt;li&gt;UWüBE&lt;/li&gt; 
&lt;liagt;# 
&lt;ul&gt; 
&lt;li&gt;2rz&&lt;/li&gt; 
&lt;li&gt;kzk&lt;/li&gt; 
&lt;/ul&gt; 
&lt;/li&gt; 
&lt;li&gt;4/FiD&lt;/li&gt; 
&lt;/ul&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


BREJK 2 


&lt;html&gt; 
&lt;body&gt; 


&lt;h4&gt; —T ERE : &1t; /h4&gt ; 
&lt;ul&gt; 
&lt;li&gt;UWüBE&lt;/li&gt; 
&1lt;li&gt;# 
&lt;ul&gt; 
&lt;li&gt;2r2&&lt;/li&gt; 
&1t ;li&gt ;绿茶 
&lt;ul&gt; 
&lt;li&gt;rhBElz&lt;/li&gt; 
&1t ;1i&gt ;非洲 茶 &1t;/1li&gt; 
&lt;/ul&gt; 
&lt;/li&gt; 
&lt;/ul&gt; 
&lt;/li&gt; 
&lt;li&gt;/FiD&lt;/li&gt; 
&lt;/ul&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


定义 列表 


&lt;html&gt; 
&lt;body&gt; 


&1t ;h2&gt ;一 个 定义 列表 : &1t; /h2&gt; 


&lt;dl&gt; 
&lt;dtagt;i+Aplalt;/dt&agt; 
&1t ; dd&gt ;用 来 计算 的 仪器 ... ...&lt;/ddagt; 
&lt;dt&gt; z28&lt;/dt&gt; 
&1t; dd&gt ;以 视觉 方式 显示 信息 的 装置 ... ...&lt;/dd&gt; 
&lt;/dl&gt; 
&lt;/body&gt; 
&lt;/html&gt; 


列表 标签 


标签 描述 
<ol> 定义 有 序列 表 。 
<ul> 定义 无 序列 表 。 
<li> 定义 列表 项 。 
«dl» 定义 定义 列表 。 
<dt> 定义 定义 项 目 。 
<dd> 定义 定义 的 描述 。 
<dir> a 
DRF. (A 


an KBE 
o 


HTML <div> 和 <span> 


可 以 通过 <div> 和 <span> 将 HTML 元 素 组 合 起 来 。 


HTML 块 元 素 


大 多 数 HTML 元 素 被 定义 为 块 级 元 素 或 内 联 元 素 。 

编者 注 :“ 块 级 元 素 ” 译 为 block level element, “内 联 元 素 " 译 为 inline element. 
块 级 元 素 在 浏览 器 显示 时 ， 通 常会 以 新 行 来 开始 (和 结束 ) 。 

例子 : <h1>, <p>, <ul>, <table> 


HTML 内 联 元 素 


内 联 元 素 在 显示 时 通常 不 会 以 新 行 开 始 。 


例子 : <b>, <td>, <a>, <img> 


HTML <div> 元 素 


HTML <div> 元 素 是 块 级 元 素 ， 它 是 可 用 于 组 合 其 他 HTML 元 素 的 容器 。 


<div> 元 素 没有 特定 的 含义 。 除 此 之 外 ， 由 于 它 属于 块 级 元 素 ， 浏 览 器 会 在 其 前 后 
显示 折 行 。 


如 果 和 与 CSS 一 同 使 用 ，<div> 元 素 可 用 于 对 大 的 内 容 块 设 置 样式 属性 。 


<div> 元 素 的 另 一 个 常见 的 用 途 是 文档 布局 。 它 取代 了 使 用 表格 定义 布局 的 老式 方 
法 。 使 用 <table> 元 素 进行 文档 布局 不 是 表格 的 正确 用 法 。<table> 元 素 的 作用 是 
显示 表格 化 的 数据 。 


HTML <span> 元 素 


HTML <span> 元 素 是 内 联 元 素 ， 可 用 作文 本 的 容器 。 
<span> 元 素 也 没有 特定 的 含义 。 
当 与 CSS 一 同 使 用 时 ，<span> 元 素 可 用 于 为 部 分 文本 设置 样式 属性 。 


HTML 分 组 标签 


W3School Html & Css 教程 


标签 描述 
<div> 定义 文档 中 的 分 区 或 节 (division/section) 。 
<span> 定义 span， 用 来 组 合 文档 中 的 行内 元 素 。 


HTML <div> 和 <span> 
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HTML 布局 


网 页 布局 对 改善 网 站 的 外 观 非 常 重 要 。 
请 慎重 设计 您 的 网 页 布局 。 


亲自 试 一 试 - 实例 
使 用 <div> 元 素 的 网 页 布局 


&lt; !DOCTYPE html&gt; 

&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 

div#container {width: 500px} 

div#header {background-color :#99bbbb; } 

div#menu {background-color :#ffff99; height :200px;width:150px; float:- 
div#content {background-color :#EEEEEE; height : 200px; width: 350px; flog 
div#footer {background-color :#99bbbb;clear:both;text-align:center;_ 
hi {margin-bottom:0; } 

h2 (margin-bottom:0;font-size:18px;) 

ul {margin:0;} 

li (list-style:none;) 

&lt;/style&gt; 

&lt;/head&gt; 


&lt;body&gt; 
&lt;div id="container"&gt; 


&lt;div id-"header"&gt; 
&lt;hi1&gt;Main Title of Web Page&lt;/hi&gt; 
&lt;/div&gt; 


&lt;div id="menu"&gt; 
&lt;h2&gt;Menu&lt;/h2&gt; 
&lt;ul&gt; 
&lt;li&gt;HTML&lt;/li&gt; 
&lt;li&gt;CSS&lt;/li&gt; 
&lt;li&gt;JavaScript&lt;/li&gt; 
&lt;/ul&gt; 

&lt;/div&gt; 


&lt;div id="content"&gt;Content goes here&lt;/div&gt; 
&lt;div id="footer"&gt;Copyright W3School.com.cn&lt;/div&gt; 


&lt;/div&gt; 


&lt;/body&gt; 
&lt;/html&gt; 





使 用 «table» 元 素 的 网 页 布局 


&lt; DOCTYPE html&gt; 
&lt;html&gt; 
&lt;body&gt; 


&lt;table width="500" border="0"&gt; 

&lt;tr&gt; 

&lt;td colspan="2" style="background-color:#99bbbb; "&gt; 
&lt;hi1&gt;Main Title of Web Page&lt;/hi&gt; 

&lt;/td&gt; 

&lt;/tr&gt; 


&lt;tr valign="top"&gt; 

&lt;td style-"background-color:£Zzffff99;width:100px;text-align:top;' 
&lt;b&gt;Menu&lt;/b&gt;&lt;br /&gt; 

HTML&lt;br /&gt; 

CSS&lt;br /&gt; 

JavaScript 

&lt;/td&gt; 

&lt;td style-"background-color:ZEEEEEE;height:200px;width:400px;te; 
Content goes here&lt;/td&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 

&lt;td colspan="2" style-z"background-color:zZ99bbbb;text-align:cent: 
Copyright W3School.com.cn&lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


| ———— ——————ÍMnÀ— 95] 


网 站 布局 


大 多 数 网 站 会 把 内 容 安排 到 多 个 列 中 (就 像 末 志 或 报纸 那样 ) 。 


可 以 使 用 <div> 或 者 <table> 元 素来 创建 多 列 。CSS 用 于 对 元 素 进 行 定位 ， 或 者 为 
页 面 创 建 背景 以 及 色彩 丰富 的 外 观 。 


提示 : 即使 可 以 使 用 HTML 表格 来 创建 漂亮 的 布局 ， 但 设计 表格 的 目的 是 呈现 表格 
化 数据 - 表格 不 是 布局 工具 | 





HTML 布局 - 使 用 <div> 元 素 


div 元 素 是 用 于 分 组 HTML 元 素 的 块 级 元 素 。 
下 面 的 例子 使 用 五 个 div 元 素来 创建 多 列 布局 : 


实例 


<!DOCTYPE html» 

«html» 

«head» 

«style type="text/css"> 

div#container {width: 500px} 

div#header {background-color :#99bbbb; } 

div#menu {background-color :#ffff99; height:200px; width:100px; flo: 
div#content {background-color:#EEEEEE; height:200px; width:400px; 1 
div#footer {background-color:#99bbbb; clear:both; text-align:cente! 
hi {margin-bottom:0; } 

h2 {margin-bottom:0; font-size:14px;} 

ul {margin:0;} 

li (list-style:none;) 

</style> 

</head> 


<body> 
«div id="container"> 


<div id="header"> 
<hi>Main Title of Web Page</h1> 
</div> 


<div id="menu"> 
<h2>Menu</h2> 

<ul> 

«li»HTML«/li» 
<l1i>CSS</1i> 
«li»JavaScript«/li» 
«/ul» 

«/div» 


«div id="content">Content goes here</div> 
«div id="footer">Copyright W3School.com.cn</div> 
</div> 


</body> 
</html> 


ES 9 衣 
上 面 的 HTML 代码 会 产生 如 下 结果 : 
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HTML 布局 - 使 用 表格 


使 用 HTML <table> 标签 是 创建 布局 的 一 种 简单 的 方式 。 


可 以 使 用 <div> sk «table» 元 素来 创建 多 列 。CSS 用 于 对 元 素 进 行 定位 ， 或 者 为 
页 面 创 建 背景 以 及 色彩 丰富 的 外 观 。 


提示 : 即使 可 以 使 用 HTML 表格 来 创建 漂亮 的 布局 ， 但 设计 表格 的 目的 是 呈现 表格 
化 数据 - 表格 不 是 布局 工具 | 
下 面 的 例子 使 用 三 行 两 列 的 表格 - 第 一 和 最 后 一 行使 用 colspan 属性 来 横 跨 两 列 : 


实例 
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<!DOCTYPE html» 
<html> 
<body> 


<table width="500" border="0"> 

<tr> 

«td colspan="2" style="background-color:#99bbbb; "> 
<hi>Main Title of Web Page</h1i> 

</td> 

</tr> 


<tr valign="top"> 

<td style="background-color:#ffff99;width:100px; text-align: top; "> 
<b>Menu</b><br /> 

HTML«br /> 

CSS<br /> 

JavaScript 

</td> 

<td style="background-color:#EEEEEE; height : 200px; width: 400px; text -« 
Content goes here</td> 

</tr> 


<tr> 

<td colspan="2" style="background-color:#99bbbb;text-align:center;' 
Copyright W3School.com.cn</td> 

</tr> 

</table> 


</body> 
</html> 


A 





上 面 的 HTML 代码 会 产生 以 下 结果 : 





Content goes here 
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HTML 布局 - 有 用 的 提示 


提示 : 使 用 CSS 最 大 的 好 处 是 ， 如 果 把 CSS 代码 存放 到 外 部 祥 式 表 中 ， 那 么 站 点 
会 更 易于 维护 。 通 过 编辑 单一 的 文件 ， 就 可 以 改变 所 有 页 面 的 布局 。 如 需 学 习 更 多 
有 关 CSS 的 知识 ， 请 访问 我 们 的 CSS 教程 。 


提示 : 由 于 创建 高 级 的 布局 非常 耗 时 ， 使 用 模板 是 一 个 快速 的 选项 。 通 过 搜索 引擎 
可 以 找到 很 多 免费 的 网 站 模板 (您 可 以 使 用 这 些 预先 构建 好 的 网 站 布局 ， 并 优化 它 
们 ) 。 


HTML 布局 标签 
<div> 定义 文档 中 的 分 区 或 节 (division/section) 。 


<Span> 定义 span， 用 来 组 合 文档 中 的 行内 元 素 。 


HTML 表单 和 输入 


HTML 表单 用 于 搜集 不 同类 型 的 用 户 输入 。 


实例 
文本 域 (Text field) 


&lt;html&gt; 
&lt;body&gt; 
&lt;form&gt; 
名 : 


&lt; input type="text" name="firstname"&gt; 
&lt;br /&gt; 

WE: 

&lt;input type="text" name-"lastname"&gt; 
&lt;/form&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


密码 域 


&lt;html&gt; 
&lt;body&gt; 


&lt;form&gt; 

REJE E 

&lt;input type="text" name="user"&gt; 

&lt;br /&gt; 

密码 : 

&lt;input type="password" name="password"&gt; 
&lt;/form&gt; 

&lt;p&gt; 

请 注意 ， 当 您 在 密码 域 中 键 人 字符 时 ， 浏 览 器 将 使 用 项 目 符 号 来 代替 这 些 字符 。 
&lt;/p&gt; 

&lt;/body&gt; 

&lt;/html&gt; 


(可 以 在 本 页 底 端 找到 更 多 实例 。) 


表单 
表单 是 一 个 包含 表单 元 来 的 区 域 。 


表单 元 素 是 允许 用 户 在 表单 中 (比如 : 文本 域 、 下 拉 列 表 、 单 选 框 、 复 选 框 等 等 ) 
输入 信息 的 元 素 。 


表单 使 用 表单 标签 («form») 定义 。 


<form> 
input 元 素 
</form> 


输入 
多 数 情 况 下 被 用 到 的 表单 标签 是 输入 标签 (<input>) 。 输 入 类 型 是 由 类 型 属性 
(type) 定义 的 。 大 多 数 经 常 被 用 到 的 输入 类 型 如 下 : 


文本 域 (Text Fields) 
当 用 户 要 在 表单 中 键入 字母 、 数 字 等 内 容 时 ， 就 会 用 到 文本 域 。 


«form» 

First name: 

<input type="text" name="firstname" /> 
<br /> 

Last name: 

<input type="text" name="lastname" /> 
</form> 


浏览 器 显示 如 下 : 


First name: | Lastname:[ | ———- 
注意 ， 表 单 本 身 并 不 可 见 。 同 时 ， 在 大 多 数 浏 览 器 中 ， 文 本 域 的 缺 省 宽度 是 20 个 字 
符 。 


单 选 按钮 (Radio Buttons) 
当 用 户 从 若干 给 定 的 的 选择 中 选取 其 一 时 ， 就 会 用 到 单 选 框 。 


«form» 

<input type="radio" name="sex" value="male" /» Male 

<br /> 

<input type="radio" name="sex" value="female" /> Female 
</form> 


浏览 器 显示 如 下 : 


C Male c Female 
注意 ， 只 能 从 中 选取 其 一 。 


复 选 框 (Checkboxes) 
当 用 户 需 要 从 若干 给 定 的 选择 中 选取 一 个 或 若干 选项 时 ， 就 会 用 到 复 选 框 。 


<form> 

<input type="checkbox" name="bike" /> 
I have a bike 

<br /> 

<input type="checkbox" name="car" /> 
I have a car 

</form> 


浏览 器 显示 如 下 : 


[^ | have a bike © l| have a car 


表单 的 动作 属性 (Action) 和 确认 按钮 


当 用 户 单 击 确认 按钮 时 ， 表 单 的 内 容 会 被 传送 到 另 一 个 文件 。 表 单 的 动作 属性 定义 
了 目的 文件 的 文件 名 。 由 动作 属性 定义 的 这 个 文件 通常 会 对 接收 到 的 输入 数据 进行 
相关 的 处 理 。 


«form name="input" action="html_form_action.asp" method="get"> 
Username: 

<input type="text" name="user" /> 

<input type="submit" value="Submit" /> 

</form> 


浏览 器 显示 如 下 : 


Username: 一 一 一 Submit 


假如 您 在 上 面 的 文本 框 内 键 人 几 个 字母 ， 然 后 点 击 确认 按钮 ， 那 么 输入 数据 会 传送 
到 "html form action.asp" 的 页 面 。 该 页 面 将 显示 出 输入 的 结果 。 


&lt;html&gt; 
&lt;body&gt; 


&lt;form&gt; 

我 喜欢 自行 车 : 

&lt;input type="checkbox" name="Bike"&gt; 
&lt;br /&gt; 

我 喜欢 汽车 : 

&lt;input type="checkbox" name="Car"&gt; 
&lt;/form&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


&lt;html&gt; 
&lt;body&gt; 


&lt;form&gt; 

男性 : 

&lt;input type="radio" checked="checked" name="Sex" value="male" /é 
&lt;br /&gt; 

女性 : 

&lt;input type="radio" name="Sex" value="female" /&gt; 
&lt;/form&gt; 


&lt;p&gt; 当 用 户 点 击 一 个 单 选 按钮 时 ， 该 按钮 会 变 为 选中 状态 ， 其 他 所 有 按钮 会 变 为 非 ; 


&lt;/body&gt; 
&lt;/html&gt; 


和 SS 和 = 
简单 的 下 拉 列表 





&lt;html&gt; 
&lt;body&gt; 


&lt;form&gt; 

&lt;select name="cars"&gt; 

&lt;option value-z'volvo"&gt;Volvo&lt;/option&gt; 
&lt;option value-"saab'&gt;Saab&lt;/option&gt; 
&lt;option value-z"fiat'"&gt;Fiat&lt;/option&gt; 
&lt;option value-"audi"&gt;Audi&lt;/option&gt; 
&lt;/select&gt; 

&lt;/form&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


另 一 个 下 拉 列 表 


&lt;html&gt; 
&lt;body&gt; 


&lt;form&gt; 

&lt;select name="cars"&gt; 

&lt;option valuez'volvo"&gt;Volvo&lt;/option&gt; 

&lt;option value-"saab'&gt;Saab&lt;/option&gt; 

&lt;option value-"fiat" selected-"selected'&gt;Fiat&lt;/option&gt; 
&lt;option value-"audi"&gt;Audi&lt;/option&gt; 

&lt;/select&gt; 

&lt;/form&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


LEN "uu 
SCA ( Textarea) 


&lt;html&gt; 
&lt;body&gt; 


&lt;p&gt; 

This example cannot be edited 
because our editor uses a textarea 
for input, 

and your browser does not allow 

a textarea inside a textarea. 
&lt;/p&gt; 


&lt;textarea rows="10" cols="30"&gt; 
The cat was playing in the garden. 


创建 按钮 


&lt;html&gt; 
&lt;body&gt; 


&lt;form&gt; 
&lt;input type="button" value="Hello world!"&gt; 
&lt;/form&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


Fieldset around data 


&lt; 'DOCTYPE HTML&gt; 
&lt;html&gt; 


&lt;body&gt; 


&lt;form&gt; 
&lt;fieldset&gt; 
&lt; legend&gt ;健康 信息 &Lt;/Legend&gt ; 
身高 : &lt;input type="text" /&gt; 
体重 :&lLt;input type="text" /&gt; 
&lt;/fieldset&gt; 
&lt;/form&gt; 


&lt;p&gt; 如 果 表 单 周 围 没有 边框 ， 说 明 您 的 浏览 器 太 老 了 。&1t; /p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


表单 实例 

带 有 输入 框 和 确认 按钮 的 表单 
&lt;html&gt; 
&lt;body&gt; 


&lt;form action-z"/example/html/form action.asp" method="get"&gt; 
&lt;p&gt;First name: &lt;input type="text" name="fname" /&gt;&lt, 
&lt;p&gt;Last name: &lt;input type="text" name-"lname" /&gt;&lt;, 
&lt;input type="submit" value="Submit" /&gt; 

&lt;/form&gt; 


&1t ; p&gt ;请 单 击 确认 按钮 ， 输 入 会 发 送 到 服务 器 上 名 为 "form_action.asp'" 的 页 面 


&lt;/body&gt; 
&lt;/html&gt; 


boo s 
带 有 复 选 框 的 表单 





&lt;html&gt; 
&lt;body&gt; 


&lt;form name="input" action-z"/html/html form action.asp" method="( 
I have a bike: 

&lt;input type="checkbox" name="vehicle" value="Bike" checked="chec 
&lt;br /&gt; 

I have a car: 

&lt;input type="checkbox" name="vehicle" value="Car" /&gt; 

&lt;br /&gt; 

I have an airplane: 

&lt;input type="checkbox" name="vehicle" value="Airplane" /&gt; 
&lt;br /&gt;&lt;br /&gt; 

&lt;input type="submit" value="Submit" /&gt; 

&lt;/form&gt; 


&1t ; p&gt; 如 果 您 点 击 "Submit" 按钮 ， 您 将 把 输入 传送 到 名 为 html form action 


&lt;/body&gt; 
&lt;/html&gt; 


到 于 0000 .::LU[QCLLCLLUMUÁCIXUSISUISILZSE 
带 有 单 选 按钮 的 表单 





&lt;html&gt; 
&lt;body&gt; 


&lt;form name="input" action-z"/html/html form action.asp" method="( 
Male: 

&lt;input type="radio" name="Sex" value="Male" checked-'checked'&g! 
&lt;br /&gt; 

Female: 

&lt;input type="radio" name="Sex" value="Female"&gt; 

&lt;br /&gt; 

&lt;input type ="Submit" value ="Submit"&gt; 

&lt;/form&gt; 


&lt;p&gt; 如 果 您 点 击 "Submit" 按钮 ， 您 将 把 输入 传送 到 名 为 html form action 


&lt;/body&gt; 
&lt;/html&gt; 


区 ÓÉ——————————ÁHIMMM E 
从 表单 发 送 电子 邮 件 





&lt;html&gt; 


&lt;body&gt; 
&lt;form action="MAILTO: someone@w3school.com.cn" method="post" enci 


&1t ;h3&gt ;这 个 表单 会 把 电子 邮件 发 送 到 w3School, &1t;/h3&gt; 

姓名 :&lt;br /&gt; 

&lt;input type="text" name="name" value="yourname" size="20"&gt; 
&lt;br /&gt; 

电邮 : &lt;br /&gt; 

&lt;input type="text" name="mail" value="yourmail" size="20"&gt; 
&lt;br /&gt; 

ABS: &lt;br /&gt; 

&lt;input type="text" name="comment" value="yourcomment" size="40"é 
&lt;br /&gt;&lt;br /&gt; 

&lt;input type="submit" value=" 发 送 "&gt; 

&lt;input type="reset" value="HB"agt; 


&lt;/form&gt; 
&lt;/body&gt; 
&lt;/html&gt; 


————————— eee 


表单 标签 





W3School Html & Css 教程 


标签 
«form» 
«input» 
«textarea» 
«label» 
«fieldset- 
«legend» 
«select» 
<optgroup> 
<option> 
<button> 


<isindex> 


HTML 表单 和 输入 


描述 
定义 供用 户 输 入 的 表单 
定义 输入 域 
定义 文本 域 (一 个 多 行 的 输入 控件 ) 
定义 一 个 控制 的 标签 
定义 域 
定义 域 的 标题 
定义 一 个 选择 列表 
定义 选项 组 
定义 下 拉 列 表 中 的 选项 
定义 一 个 按钮 
GRA. A «input» RË. 
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HTML 框架 


通过 使 用 框架 ， 你 可 以 在 同一 个 浏览 器 窗口 中 显示 不 止 一 个 页 面 。 


实例 
垂直 框架 


&lt;html&gt; 

&lt;frameset cols="25%,50%, 2596" &gt ; 
&lt;frame src="/example/html/frame_a.htmlL"&gt; 
&lt;frame src-z"/example/html/frame b.html'"&gt; 
&lt;frame src-z"/example/html/frame c.html"&gt; 

&lt;/frameset&gt; 


&lt;/html&gt; 


水 平 框架 


&lt;html&gt; 

&lt; frameset rows="25%, 5096, 2596" &gt ; 
&lt;frame src="/example/html/frame_a.htmlL"&gt; 
&lt;frame src-z'"/example/html/frame b.html"&gt; 
&lt;frame src="/example/html/frame_c.htmlL"&gt; 

&lt;/frameset&gt; 


&lt;/html&gt; 
《可 以 在 本 页 底 端 找到 更 多 实例 。) 


框架 
通过 使 用 框架 ， 你 可 以 在 同一 个 浏览 器 窗口 中 显示 不 止 一 个 页 面 。 每 份 HTML 文 档 
称 为 一 个 框架 ， 并 且 每 个 框架 都 独立 于 其 他 的 框架 。 
使 用 框架 的 坏处 : 
e 开发 人 员 必 须 同 时 跟踪 更 多 的 HTML 文 档 


e 很 难 打印 整 张 页 面 
框架 结构 标签 (<frameset>) 


编者 注 : frameset 标签 也 被 某 些 文章 和 书籍 译 为 框架 集 。 


框架 标签 (Frame) 


Frame 标签 定义 了 放置 在 每 个 框架 中 的 HTML 文档 。 


在 下 面 的 这 个 例子 中 ， 我 们 设置 了 一 个 两 列 的 框架 集 。 第 一 列 被 设置 为 占据 浏览 器 
窗口 的 25%。 第 二 列 被 设置 为 占据 浏览 器 窗口 的 75%。HTML 文档 "frame_a.htm" 
被 置 于 第 一 个 列 中 ， 而 HTML 文档 "frame_b.htm" 被 置 于 第 二 个 列 中 : 


<frameset cols="25%,75%"> 
«frame src="frame_a.htm"> 
<frame src="frame_b.htm"> 
</frameset> 


基本 的 注意 事项 - 有 用 的 提示 : 

假如 一 个 框架 有 可 见 边框 ， 用 户 可 以 拖 动 边框 来 改变 它 的 大 小 。 为 了 避免 这 种 情况 
发 生 ， 可 以 在 «frame» 标签 中 加 入 : noresize="noresize"。 

为 不 支持 框架 的 浏览 器 添加 <noframes> 标签 。 

重要 提示 : 不 能 将 <body></body> 标签 与 <frameset></frameset> 标签 同时 使 
A! 不过， 假如 你 添加 包含 一 段 文本 的 <noframes> 标签 ， 就 必须 将 这 段 文字 终 套 


于 <body></body> 标签 内 。 (在 下 面 的 第 一 个 实例 中 ， 可 以 查看 它 是 如 何 实现 
的 。) 


<a id="more_examples"> 更 多 实例 </a> 


如 何 使 用 <noframes> 标签 


&lt;html&gt; 

&lt;frameset cols="25%, 50%, 2596" &gt ; 
&lt;frame srcz'"/example/html/frame a.html'"&gt; 
&lt;frame src-z"/example/html/frame b.html"&gt; 
&lt;frame src="/example/html/frame_c.htmlL"&gt; 

&lt;noframes&gt; 

&lt;body&gt ;您 的 浏览 器 无 法 处 理 框架 1 &1t; /body&gt ; 

&lt;/noframes&gt; 

&lt;/frameset&gt; 


&lt;/html&gt; 


混合 框架 结构 


&lt;html&gt; 

&lt; frameset rows-z'509?6, 5096" &gt ; 

&lt;frame srcz"/example/html/frame a.html"&gt; 
&lt; frameset cols="25%, 7596" &gt ; 

&lt;frame srcz"/example/html/frame b.html"&gt; 
&lt;frame srcz"/example/html/frame c.html"&gt; 
&lt;/frameset&gt; 

&lt;/frameset&gt; 


&lt;/html&gt; 


含有 noresize-"noresize" 属性 的 框架 结构 


&lt;html&gt; 


&lt; frameset cols="50%, *,25%"&gt; 
&lt;frame src="/example/html/frame_a.html" noresize="noresize" /é 
&lt;frame srcz"/example/html/frame b.html" /&gt; 
&lt;frame srcz"/example/html/frame c.html" /&gt; 
&lt;/frameset&gt; 


&lt;/html&gt; 
[EEE 
导航 框架 





&lt;html&gt; 
&lt;frameset cols-'120,*"&gt; 


&lt;frame srcz'"/example/html/html contents.html'"&gt; 


&lt;frame src-z'"/example/html/frame a.html" name-z"showframe"&gt; 


&lt;/frameset&gt; 
&lt;/html&gt; 
‘| 





内 联 框架 


&lt;html&gt; 
&lt;body&gt; 
&lt;iframe srcz"/i/eg landscape.jpg"&gt;&lt;/iframe&gt; 


&lt;p&gt ;一 些 老 的 浏览 器 不 支持 iframe. &lt;/p&gt; 
&1t ; p&gt ; 如 果 得 不 到 支持 ，iframe 是 不 可 见 的 。&1t;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


跳 转 至 框架 内 的 一 个 指定 的 节 


&lt;html&gt; 
&lt;frameset cols="20%, 80%"&gt; 


&lt; frame srcz"/example/html/frame a.html"&gt; 
&lt;frame src="/example/htm1/link.html#C10"&gt ; 


&lt;/frameset&gt; 


&lt;/html&gt; 


使 用 框架 导航 跳 转 至 指定 的 节 


HTML Iframe 
iframe 用 于 在 网 页 内 显示 网 页 。 


<iframe src="/html/index.asp" height="300px" width="99%" style="mat 
J — # 








添加 iframe 的 语法 
<iframe src="_URL_"></iframe> 
URL 指向 隔离 页 面 的 位 置 。 


Iframe - 设置 高 度 和 宽 撒 


height 和 width 属性 用 于 规定 iframe 的 高 度 和 宽度 。 
属性 值 的 默认 单位 是 像素 ， 但 也 可 以 用 百分比 来 设 定 (比如 "80%") 。 


实例 


<iframe src="demo_iframe.htm" width="200" height="200"></iframe> 


Iframe - 删除 边框 


frameborder 属性 规定 是 否 显 示 iframe 周围 的 边框 。 


设置 属性 值 为 "0" 就 可 以 移 除 边 框 : 
实例 
LH 


<iframe src="demo_iframe.htm" frameborder="0"></iframe> 


使 用 iframe 作为 链接 的 目标 


iframe 可 用 作 链 接 的 目标 (target) 。 


链接 的 target 属性 必须 引用 iframe 的 name 属性 : 
实例 


<iframe src="demo_iframe.htm" name="iframe_a"></iframe> 
<p><a href="http://www.w3school.com.cn" target="iframe_a">w3School 


‘| — — H8 








HTML iframe 标签 


«iframe» 定义 内 联 的 子 窗 口 (框架 ) 


HTML = 


好 的 背景 使 站 点 看 上 去 特别 棒 。 


实例 
搭配 良好 的 背景 和 颜色 


&lt;html&gt; 

&lt;body bgcolor="#d0d0d0"&gt; 

&lt;p&gt; 

这 是 段落 。 这 是 段落 。 这 是 段落 。 这 是 段落 。 这 是 段落 。 这 是 段落 。 这 是 段落 。 这 是 段落 。 
&lt;/p&gt; 

&lt;p&gt; 

这 是 另 一 个 段落 。 这 是 另 一 个 段落 。 这 是 另 一 个 段落 。 这 是 另 一 个 段落 。 这 是 另 一 个 段落 。 


&lt;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


s -— 
搭配 得 不 好 的 背景 和 颜色 





&lt;html&gt; 

&lt;body bgcolorz"zffffff" text="yellow"&gt; 

&lt;p&gt; 

这 是 段落 。 这 是 段落 。 这 是 段落 。 这 是 段落 。 这 是 段落 。 这 是 段落 。 这 是 段落 。 这 是 段落 。 
&lt;/p&gt; 

&lt;p&gt; 

这 是 另 一 个 段落 。 这 是 另 一 个 段落 。 这 是 另 一 个 段落 。 这 是 另 一 个 段落 。 这 是 另 一 个 段落 。 


&lt;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


a —— B 
(可 以 在 本 页 底 端 找到 更 多 实例 。) 





= (Backgrounds) 


<body> 拥有 两 个 配置 背景 的 标签 。 背 景 可 以 是 颜色 或 者 图 像 。 


背景 颜色 (Bgcolor) 
背景 颜色 属性 将 背景 设置 为 某 种 颜色 。 属 性 值 可 以 是 十 六 进 制 数 、RGB 值 或 颜色 


o 


«body bgcolor="#000000"> 
«body bgcolor="rgb(0,0,0)"> 
«body bgcolor="black"> 


以 上 的 代码 均 将 背景 颜色 设置 为 黑色 。 


背景 


Ez (Background) 


背景 属性 将 背景 设置 为 图 像 。 属 性 值 为 图 像 的 URL。 如 果 图 像 尺 寸 小 于 浏览 器 窗 
口 ， 那 么 图 像 将 在 整个 浏览 器 窗口 进行 复制 。 


<body background="clouds.gif"> 
«body background="http://www.w3school.com.cn/clouds.gif"> 


URL 可 以 是 相对 地 址 ， 如 第 一 行 代 码 。 也 可 以 使 绝对 地 址 ， 如 第 二 行 代码 。 
提示 : 如 果 你 打算 使 用 背景 图 片 ， 你 需要 紧 记 一 下 几 点 : 


育 景 图 像 是否 增 加 了 页 面 的 加 载 时 间 。 小 贴 十 : 图 像 文件 不 应 超过 10k。 
背景 图 像 是 否 与 页 面 中 的 其 他 图 象 搭配 良好 。 

背景 图 像 是 否 与 页 面 中 的 文字 颜色 搭配 良好 。 

图 像 在 页 面 中 平 铺 后 ， 看 上 去 还 可 以 吗 ? 

对 文字 的 注意 力 被 背景 图 像 喧 宾 夺 主 了 吗 ? 


基本 的 注意 事项 - 有 用 的 提示 : 

«body» 标签 中 的 背景 颜色 (bgcolor) . HH (background) 和 文本 (text) 属性 
在 最 新 的 HTML 标准 (HTML4 和 XHTML) 中 已 被 废弃 。W3C 在 他 们 的 推荐 标准 
中 已 删除 这 些 属 性 。 

AZAZ ARAR (CSS) 来 定义 HTML 元 素 的 布局 和 显示 属性 。 


<a id="more_examples"> 更 多 实例 </a> 


可 用 性 强 的 背景 图 像 


&lt;html&gt; 

&lt;body backgroundz"/i/eg bg 06.gif'&gt; 
&lt;h3&gt; 图像 背 景 &1lt;/h3&gt; 

&lt;p&gt;gif 和 jpg 文件 均 可 用 作 HTML 背景 。&]t;/p&gt; 
&lt;p&gt; 如 果 图 像 小 于 页 面 ， 图 像 会 进行 重复 。&1lt;/p&gt; 
&lt;/body&gt; 


&lt;/html&gt; 


可 用 性 强 的 背景 图 像 2 


&lt;html&gt; 

&lt;body background="/i/eg_bg_04.gif"&gt; 
&lt;h3&gt; 图像 背 景 &1t;/h3&gt; 

&lt;p&gt;gif 和 jpg 文件 均 可 用 作 HTML 背景 。&]t;/p&gt; 
&1t ; p&gt ;如果 图 像 小 于 页 面 ， 图 像 会 进行 重复 。&]1t;/p&gt; 
&lt;/body&gt; 


&lt;/html&gt; 


可 用 性 差 的 背景 图 像 


&lt;html&gt; 

&lt;body backgroundz"/i/eg bg 01.gif'&gt; 
&lt;h3&gt; 图像 背 景 &1t;/h3&gt; 

&lt;p&gt;gif 和 jpg 文件 均 可 用 作 HTML BH. &lt;/p&gt; 
&1t ; p&gt ;如果 图 像 小 于 页 面 ， 图 像 会 进行 重复 。&]1t;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


HTML 颜色 


颜色 由 红色 、 绿 色 、 蓝 色 混 合 而 成 。 


颜色 值 


颜色 由 一 个 十 六 进 制 符号 来 定义 ， 这 个 符号 由 红色 、 绿 色 和 蓝 色 的 值 组 成 
(RGB) 。 


每 种 颜色 的 最 小 值 是 0 (十 六 进 制 : #00) 。 最 大 值 是 255 (十 六 进 制 : #FF) 。 
这 个 表格 给 出 了 由 三 种 颜色 混合 而 成 的 具体 效果 : 


Color HEX Color RGB 
#000000 rgb(0,0,0) 
#FF0000 rgb(255,0,0) 
#00FF00 rgb(0,255,0) 
#0000FF rgb(0,0,255) 
#FFFFOO rgb(255,255,0) 
#00FFFF rgb(0,255,255) 
#FFOOFF rgb(255,0,255) 
#COCOCO rgb(192,192,192) 
#FFFFFF rgb(255,255,255) 


大 多 数 的 浏览 器 都 支持 颜色 名 集合 。 


提示 : 仅仅 有 16 种 颜色 名 被 W3C 的 HTML4.0 标准 所 支持 。 它 们 是 : aqua, 
black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, 
white, yellow. 


如 果 需 要 使 用 其 它 的 颜色 ， 需 要 使 用 十 六 进 制 的 颜色 值 。 


Color HEX Color Name 
#FOF8FF AliceBlue 
#FAEBD7 AntiqueWhite 
#7FFFD4 Aquamarine 
#000000 Black 
#0000FF Blue 
#8A2BE2 BlueViolet 
#A52A2A Brown 
Web 安 全 色 


数 年 以 前 ， 当 大 多 数 计算 机 仅 支 持 256 种 颜色 的 时 候 ， 一 系列 216 种 Web 安全 色 
作为 Web 标准 被 建议 使 用 。 其 中 的 原因 是 ， 微 软 和 Mac 操作 系统 使 用 了 40 种 不 
同 的 保留 的 固定 系统 颜色 〈 双 方 大 约 各 使 用 20 种 ) 。 

我 们 不 确定 如 今 这 人 么 做 的 意义 有 多 大 ， 因 为 越 来 越 多 的 计算 机 有 能 力 处 理 数 百 万 种 
颜色 ， 不 过 做 选择 还 是 你 自己 。 


216 跨 平台 


最 初 ，216 跨 平台 web 安全 色 被 用 来 确保 : 当 计算 机 使 用 256 色调 色 板 时 ， 所 有 
的 计算 机 能 够 正确 地 显示 所 有 的 颜色 。 


000000 000033 000066 000099 0000CC 0000FF 
003300 003333 003366 003399 0033CC 0033FF 
006600 006633 006666 006699 0066CC 0066FF 
009900 009933 009966 009999 0099CC 0099FF 
00CC00 00CC33 00CC66 00CC99 00CCCC OOCCFF 
OOFFOO OOFF33 OOFF66 OOFF99 OOFFCC OOFFFF 
330000 330033 330066 330099 3300CC 3300FF 
333300 333333 333366 333399 3333CC 3333FF 
336600 336633 336666 336699 3366CC 3366FF 
339900 339933 339966 339999 3399CC 3399FF 
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF 
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF 


660000 
663300 
666600 
669900 
66CC00 
66FF00 
990000 
993300 
996600 
999900 
99CC00 
99FF00 
CC0000 
CC3300 
CC6600 
CC9900 
CCCCOO 
CCFFOO 
FF0000 
FF3300 
FF6600 
FF9900 
FFCCOO 
FFFFOO 


660033 
663333 
666633 
669933 
66CC33 
66FF33 
990033 
993333 
996633 
999933 
99CC33 
99FF33 
CC0033 
CC3333 
CC6633 
CC9933 
CCCC33 
CCFF33 
FF0033 
FF3333 
FF6633 
FF9933 
FFCC33 
FFFF33 


660066 
663366 
666666 
669966 
66CC66 
66FF66 
990066 
993366 
996666 
999966 
99CC66 
99FF66 
CC0066 
CC3366 
CC6666 
CC9966 
CCCC66 
CCFF66 
FF0066 
FF3366 
FF6666 
FF9966 
FFCC66 
FFFF66 


660099 
663399 
666699 
669999 
66CC99 
66FF99 
990099 
993399 
996699 
999999 
99CC99 
99FF99 
CC0099 
CC3399 
CC6699 
CC9999 
CCCC99 
CCFF99 
FF0099 
FF3399 
FF6699 
FF9999 
FFCC99 
FFFF99 


6600CC 
6633CC 
6666CC 
6699CC 
66CCCC 
66FFCC 
9900CC 
9933CC 
9966CC 
9999CC 
99CCCC 
99FFCC 
CCOOCC 
CC33CC 
CC66CC 
CC99CC 
CCCCCC 
CCFFCC 
FFOOCC 
FF33CC 
FF66CC 
FF99CC 
FFCCCC 
FFFFCC 


6600FF 
6633FF 
6666FF 
6699FF 
66CCFF 
66FFFF 
9900FF 
9933FF 
9966FF 
9999FF 
99CCFF 
99FFFF 
CCOOFF 
CC33FF 
CC66FF 
CC99FF 
CCCCFF 
CCFFFF 
FFOOFF 
FF33FF 
FF66FF 
FF99FF 
FFCCFF 
FFFFFF 


HTML 颜色 名 


本 页 提供 了 被 大 多 数 浏 览 器 支持 的 颜色 名 。 


提示 : UB 16 种 颜色 名 被 W3C 的 HTML 4.0 标准 支持 ， 它 们 是 : aqua, black, 
blue, fuchsia, gray. green. lime, maroon, navy. olive, purple, red, 
silver, teal, white, yellow. 


如 果 使 用 其 它 颜色 的 话 ， 就 应 该 使 用 十 六 进 制 的 颜色 值 。 


颜色 名 列表 
单 击 一 个 颜色 名 或 者 16 进 制 值 ， 就 可 以 查看 与 不 同文 字 颜 色 搭配 的 背景 颜色 。 
颜色 名 十 六 进 制 颜色 值 
AliceBlue #FOF8FF 
AntiqueWhite #FAEBD7 
Aqua #00FFFF 
Aquamarine #7FFFD4 
Azure #FOFFFF 
Beige #F5F5DC 
Bisque #FFE4C4 
Black #000000 
BlanchedAlmond #FFEBCD 
Blue #0000FF 
BlueViolet #8A2BE2 
Brown #A52A2A 
BurlyWood #DEB887 
CadetBlue #5F9EA0 
Chartreuse #7FFFOO 
Chocolate #D2691E 
Coral #FF7F50 


CornflowerBlue #6495ED 
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Cornsilk #FFF8DC 
Crimson #DC143C 
Cyan #00FFFF 
DarkBlue #00008B 
DarkCyan #008B8B 
DarkGoldenRod #B8860B 
DarkGray #A9A9A9 
DarkGreen #006400 
DarkKhaki #BDB76B 
DarkMagenta #8B008B 
DarkOliveGreen #556B2F 
Darkorange 4FF8COO 
DarkOrchid #9932CC 
DarkRed #8B0000 
DarkSalmon #E9967A 
DarkSeaGreen #8FBC8F 
DarkSlateBlue #483D8B 
DarkSlateGray #2F4F4F 
DarkTurquoise #00CED1 
DarkViolet #9400D3 
DeepPink #FF1493 
DeepSkyBlue #00BFFF 
DimGray #696969 
DodgerBlue #1E90FF 
Feldspar #D19275 
FireBrick #B22222 
FloralWhite #FFFAFO 
ForestGreen #228B22 
Fuchsia #FFOOFF 
Gainsboro #DCDCDC 





HTML 颜色 名 


— 
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LightSkyBlue #87CEFA 
LightSlateBlue #8470FF 
LightSlateGray #778899 
LightSteelBlue #BOC4DE 
LightYellow #FFFFEO 


GhostWhite #F8F8FF 

GreenYellow 

LavenderBlush 

LemonChiffon 

LightGoldenRodYellow 

LightSeaGreen 
Lu 
#8470FF 00000 
88 
PCDE 00000000 
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Lime 

LimeGreen 

Linen 

Magenta 

Maroon 
MediumAquaMarine 
MediumBlue 
MediumOrchid 
MediumPurple 
MediumSeaGreen 
MediumSlateBlue 
MediumSpringGreen 
MediumTurquoise 
MediumVioletRed 
MidnightBlue 
MintCream 
MistyRose 
Moccasin 
NavajoWhite 
Navy 

OldLace 

Olive 

OliveDrab 

Orange 
OrangeRed 
Orchid 
PaleGoldenRod 


PaleGreen 





PaleTurquoise 


HTML 颜色 名 


#00FF00 
#32CD32 
#FAFOE6 
#FFOOFF 
#800000 
#66CDAA 
#0000CD 
#BA55D3 
#9370D8 
#3CB371 
#7B68EE 
#OOFA9A 
#48D1CC 
#C71585 
#191970 
#FOFFFA 
#FFE4E1 
#FFE4B5 
#FFDEAD 
#000080 
4FDF5EG 
#808000 
#6B8E23 
#FFA500 
#FF4500 
#DA70D6 
#EEE8AA 
#98FB98 
#AFEEEE 
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PaleVioletRed #D87093 
Ret FOOD 
SaddleBrown 


— 
eo 
ce 


HTML 颜色 名 
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VioletRed 
Wheat 
White 
WhiteSmoke 
Yellow 


YellowGreen 





HTML 颜色 名 


#D02090 
#F5DEB3 
#FFFFFF 
#F5F5F5 
#FFFF00 
#9ACD32 
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HTML 4.01 快速 参考 


KA W3School 的 HTML 快速 参考 。 可 以 打印 它 ， 以 备 日 常 使 用 。 
HTML Basic Document 


<html> 

<head> 

<title>Document name goes here</title> 
</head> 

<body> 

Visible text goes here 

</body> 

</html> 


Text Elements 


<p>This is a paragraph</p> 

<br> (line break) 

<hr> (horizontal rule) 

<pre>This text is preformatted</pre> 


Logical Styles 


<em>This text is emphasized</em> 
<strong>This text is strong</strong> 
<code>This is some computer code</code> 


Physical Styles 


<b>This text is bold</b> 
<i>This text is italic</i> 


Links, Anchors, and Image Elements 


<a href="http://www.example.com/">This is a Link</a> 

«a href="http://www.example.com/"><img src="URL" 

alt="Alternate Text"></a> 

«a href="mailto:webmaster@example.com">Send e-mail</a>A named anch 
<a name="tips">Useful Tips Section</a> 

<a href="#tips">Jump to the Useful Tips Section</a> 
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Unordered list 


«ul» 

«li»First item</li> 
«li»Next item</1li> 
«/ul» 


Ordered list 


«ol» 

«li»First item</li> 
«li»Next item</1li> 
«/ol» 


Definition list 


«dl» 

<dt>First term</dt> 
<dd>Definition</dd> 
<dt>Next term</dt> 
<dd>Definition</dd> 
«/dl» 


Tables 


<table border="1"> 

<tr> 
<th>someheader</th> 
<th>someheader</th> 

</tr> 

<tr> 
<td>sometext</td> 
<td>sometext</td> 

</tr> 

</table> 


Frames 


«frameset cols="25%, 75%"> 
«frame src="page1.htm"> 
«frame src="page2.htm'"> 

</frameset> 


Forms 


«form action="http://ww.example.com/test.asp" method="post/get"> 
<input type="text" name="lastname" 
value="Nixon" size="30" maxlength="50"> 
<input type="password"> 

<input type="checkbox" checked="checked"> 
<input type="radio" checked="checked"> 
«input type-"submit"- 

«input type="reset"> 

«input type="hidden"> 

«select» 

<option>Apples 

<option selected>Bananas 

<option>Cherries 

</select> 

<textarea name="Comment" rows="60" 
cols="20"></textarea> 

</form> 


eee i 


Entities 


&lt; is the same as < 
&gt; is the same as > 
&#169; is the same as ? 


Other Elements 


<!-- This is a comment --> 
<blockquote> 

Text quoted from some source. 
</blockquote> 

<address> 


Address 1<br> 
Address 2<br> 
City<br> 
</address> 


Source : http://www.w3school.com.cn/html/html quick.asp 


HTML 高 级 


HTML <!DOCTYPE> 


<!DOCTYPE> 声明 帮助 浏览 器 正确 地 显示 网 页 。 


<!DOCTYPE> 声明 
Web 世界 中 存在 许多 不 同 的 文档 。 只 有 了 解 文档 的 关 型 ， 浏 览 器 才能 正确 地 显示 文 
档 。 


HTML 也 有 多 个 不 同 的 版 本 ， 只 有 完全 明白 页 面 中 使 用 的 确切 HTML 版 本 ， 浏 览 器 
才能 完全 正确 地 显示 出 HTML 页 面 。 这 就 是 <IDOCTYPE> 的 用 处 。 


<!IDOCTYPE> 不 是 HTML 标签 。 它 为 浏览 器 提供 一 项 信息 (声明) ， 即 HTML 是 
用 什么 版 本 编写 的 。 


提示 : W3School 即将 升级 为 最 新 的 HTML5 文档 类 型 。 


实例 
带 有 HTML5 DOCTYPE 的 HTML 文档 : 


«IDOCTYPE html» 

«html» 

«head» 

<title>Title of the document</title> 
«/head» 


«body» 
The content of the document...... 
«/body» 


«/html» 


HTML 版 本 


从 Web 诞生 早期 至 今 ， 已 经 发 展 出 多 个 HTML 版 本 : 


版 本 年 份 


HTML 1991 
HTML+ 1993 
HTML 2.0 1995 
HTML 3.2 1997 
HTML 4.01 1999 
XHTML 1.0 2000 
HTML5 2012 
XHTML5 2013 

曾 用 的 声明 

HTML5 


<!DOCTYPE html» 


HTML 4.01 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/htm14/loose.dtd"> 


XHTML 1.0 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtmli/DTD/xhtml1-transitional.dtd"> 


如 需 完整 的 文档 类 型 声明 列表 ， 请 访问 我 们 的 DOCTYPE 参考 手册 。 


HTML 头 部 元 素 
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x 自 试 一 试 - 实例 
文档 的 标题 


SESE Sas wz 


&lt;html&gt; 

&lt;head&gt; 

&lt;meta http-equiv="Content-Type" content="text/html; charset-gb2: 
&lt;meta http-equiv-"Content-Language" content-"zh-cn" /&gt; 


&lt ;title&gt ;标题 不 会 显示 在 文档 区 &lLt ;/title&gt 
&lt;/head&gt; 


&lt;body&gt; 
&1t ; p&gt ;这 上 段 文 本 会 显示 出 来 。&1t;/p&gt，; 
&lt;/body&gt; 


&lt;/html&gt; 





所 有 链接 一 个 目标 


&lt; DOCTYPE html&gt; 

&lt;html&gt; 

&lt;head&gt; 

&lt;meta http-equiv="Content-Type" content="text/html; charset-gb2: 
&lt;meta http-equiv-"Content-Language" content="zh-cn" /&gt; 


&lt;base target-" blank" /&gt; 
&lt;/head&gt; 


&lt;body&gt; 


&lt;p&gt; 
&lt;a href="http://www.w3school.com.cn" target="_blank"&gt; 这 个 连接 & 
&lt;/p&gt; 


&lt;p&gt; 
&lt;a hrefz'"http://www.w3school.com.cn"&gt;ixikiE&lt;/a&gt; 也 将 在 这 
&lt;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 








文档 描述 


&lt;html&gt; 


&lt;head&gt; 
&lt;meta http-equiv="Content-Type" content="text/html; charset-gb2: 


&lt;meta name="author" 
content="w3school.com.cn"&gt; 


&lt;meta name="revised" 
content="David Yang, 8/1/07"&gt; 


&lt;meta name="generator" 
content="Dreamweaver 8.0en"&gt; 


&lt;/head&gt; 
&lt;body&gt; 
&lt;p&gt; 本 文档 的 meta 属性 标识 了 创作 者 和 编辑 软件 。&1t;/p&gt，; 
&lt;/body&gt; 
&lt;/html&gt; 
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文档 关键 词 





&lt;html&gt; 


&lt;head&gt; 
&lt;meta http-equiv="Content-Type" content="text/html; charset-zgb2: 


&lt;meta name="description" 
content="HTML examples"&gt; 


&lt;meta name="keywords" 
content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"&gt; 


&lt;/head&gt; 
&lt;body&gt; 
&lLt;p&gt; 本 文档 的 meta 属性 描述 了 该 文档 和 它 的 关键 词 。&1t;/p&gt; 
&lt;/body&gt; 
&lt;/html&gt; 

ED aZz2QdüoS5aeaSa 533SS— —33i3J:1)7yAUUus 


重 定向 用 户 





&lt; !DOCTYPE HTML&gt; 

&lt;html&gt; 

&lt;head&gt; 

&lt;meta http-equiv="Content-Type" content="text/html; charset-gb2: 
&lt;meta http-equiv="Refresh" contentz'5;url-http://www.w3school.ct 
&lt;/head&gt; 


&lt;body&gt; 

&lt;p&gt; 

对 不 起 。 我 们 已 经 搬家 了 。 您 的 URL Æ &lt;a hrefz"http://www.w3school.com 
&lt;/p&gt; 

&lt;pagt ;您 将 在 5 秒 内 被 重 定向 到 新 的 地 址 。&1t;/p&gt; 

&1t ; p&gt ;如果 超 过 5 秒 后 您 仍然 看 到 本 消息 ， 请 点 击 上 面 的 链接 。&1t;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 
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HTML <head> 元 素 
<head> 元 素 是 所 有 头 部 元 素 的 容器 。<head> 内 的 元 素 可 包含 脚本 ， 指 示 浏 览 器 在 
何 处 可 以 找到 样式 表 ， 提 供 元 信息 ， 等 等 。 


以 下 标签 都 可 以 添加 到 head 部 分 : «title», «base». «link», «meta». «script» 
以 及 <style>. 


HTML «title» 755 


«title» 标签 定义 文档 的 标题 。 

title 元 素 在 所 有 HTML/XHTML 文档 中 都 是 必需 的 。 
title 元 素 能 够 : 

e 定义 浏览 器 工具 栏 中 的 标题 

e 提供 页 面 被 添加 到 收藏 夹 时 显示 的 标题 

e 显示 在 搜索 引擎 结果 中 的 页 面 标题 
一 个 简化 的 HTML 文档 : 


«IDOCTYPE html» 

«html» 

«head» 

<title>Title of the document</title> 
«/head» 


«body» 
The content of the document...... 
«/body» 


«/html» 


HTML «base»? 元 素 
«base» 标签 为 页 面 上 的 所 有 链接 规定 默认 地 址 或 默认 目标 (target) 


<head> 

«base href="http://www.w3school.com.cn/images/" /> 
<base target="_blank" /> 

</head> 


HTML «link» 70% 


«link» 标签 定义 文档 与 外 部 资源 之 间 的 关系 。 
«link» 标签 最 常用 于 连接 样式 表 : 


<head> 
<link rel="stylesheet" type="text/css" href="mystyle.css" /> 
</head> 


HTML <style> 元 素 


<style> 标签 用 于 为 HTML 文档 定义 样式 信息 。 
您 可 以 在 style 元 素 内 规定 HTML 元 素 在 浏览 器 中 呈现 的 样式 : 


<head> 

<style type="text/css"> 

body {background-color :yellow} 
p {color:blue} 

</style> 

</head> 


HTML «meta» 元 素 


元 数据 (metadata) 是 关于 数据 的 信息 。 


<meta> 标签 提供 关于 HTML 文档 的 元 数据 。 元 数据 不 会 显示 在 页 面 上 ， 但 是 对 于 
机 器 是 可 读 的 。 


典型 的 情况 是 ，meta 元 素 被 用 于 规定 页 面 的 描述 、 关 键 词 、 文 档 的 作者 、 最 后 修 
改 时 间 以 及 其 他 元 数据 。 


<meta> 标签 始终 位 于 head 元 素 中 。 

元 数据 可 用 于 浏览 器 〈 如 何 显示 内 容 或 重新 加 载 页 面 ) ， 搜 索引 擎 (关键 词 ) ， 或 
其 他 web 服务 。 

针对 搜索 引擎 的 关键 词 

一 些 搜索 引擎 会 利用 meta 元 素 的 name 和 content 属性 来 索引 您 的 页 面 。 

下 面 的 meta 元 素 定 义 页 面 的 描述 : 


<meta name="description" content="Free Web tutorials on HTML, CSS, 
下 面 的 meta 元 素 定 义 页面 的 关键 词 : 





<meta name="keywords" content="HTML, CSS, XML" /> 
name 和 content 属性 的 作用 是 描述 页 面 的 内 容 。 


HTML «script» 元 素 


<script> 标签 用 于 定义 客户 端 脚本 ， 比 如 JavaScript. 
我 们 会 在 稍 后 的 章节 讲解 script 元 素 。 


HTML 头 部 元 素 
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标签 描述 
<head> 定义 关于 文档 的 信息 。 
<title> 定义 文档 标题 。 
<base> 定义 页 面 上 所 有 链接 的 默认 地 址 或 默认 目标 。 
«link» 定义 文档 与 外 部 资源 之 间 的 关系 。 
<meta> 定义 关于 HTML 文档 的 元 数据 。 
<script> 定义 客户 端 脚本 。 
<style> 定义 文档 的 样式 信息 。 


HTML 头 部 元 素 


HTML 脚本 


JavaScript 使 HTML 页 面具 有 更 强 的 动态 和 交互 性 。。 


实例 
插入 一 段 脚本 


&lt;html&gt; 

&lt;body&gt; 

&lt;script type="text/javascript"&gt; 
document.write("&lt;hi&gt;Hello World!&lt;/hi&gt;") 
&lt;/script&gt; 

&lt;/body&gt; 


&lt;/html&gt; 


使 用 <noscript> 标签 


&lt; DOCTYPE html&gt; 
&lt;html&gt; 
&lt;body&gt; 


&lt;script type="text/javascript"&gt; 

document.write("Hello World!") 

&lt;/script&gt; 

&lt;noscript&gt;Sorry, your browser does not support JavaScript! &li 


&1t ; p&gt ;不 支持 JavaScript 的 浏览 器 将 显示 noscript THRHNMA, &lt;/p& 


&lt;/body&gt; 
&lt;/html&gt; 
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HTML script 元 素 

«script» 标签 用 于 定义 客户 端 脚本 ， 比 如 JavaScript. 

script 元 素 既 可 包含 脚本 语句 ， 也 可 通过 src 属性 指向 外 部 脚本 文件 。 
必需 的 type 属性 规定 脚本 的 MIME 类 型 。 


JavaScript 最 常用 于 图 片 操作 、 表 单 验 证 以 及 内 容 动态 更 新 。 
下 面 的 脚本 会 向 浏览 器 输出 “Hello World!” : 


<script type="text/javascript"> 
document .write("Hello World!") 
</script> 


提示 : 如 果 需 要 学 习 更 多 有 关 在 HTML 中 编写 脚本 的 知识 ， 请 访问 我 们 的 
JavaScript 教程 。 


<noscript> 标签 

<noscript> 标签 提供 无 法 使 用 脚本 时 的 蔡 代 内 容 ， 比 方 在 浏览 器 禁用 脚本 时 ， 或 浏 
览 器 不 支持 客户 端 脚本 时 。 

noscript 元 素 可 包含 普通 HTML 页 面 的 body 元 素 中 能 够 找到 的 所 有 元 素 。 
只 有 在 浏览 器 不 支持 脚本 或 者 禁用 脚本 时 ， 才 会 显示 noscript 元 素 中 的 内 容 : 


<script type="text/javascript"> 
document .write("Hello World!") 


</script> 
<noscript>Your browser does not support JavaScript!</noscript> 


如 何 应 付 老式 的 浏览 器 

如 果 浏 览 器 压根 没 法 识别 «script» 标签 ， 那 么 «script» 标签 所 包含 的 内 容 将 以 文本 

方式 显示 在 页 面 上 。 为 Ve d dern 你 应 该 将 脚本 隐藏 在 注释 标签 当中 。 
那些 老 的 浏览 器 (无 法 识别 «script? 标签 的 浏览 器 ) 将 忽略 这 些 注释 ， 所 以 不 会 将 


标签 的 内 容 显 示 到 页 面 上 。 而 那些 新 的 浏览 器 将 读 懂 这 些 脚本 并 执行 它们 ， 即 使 代 
ARRET TAAA. 


实例 
JavaScript: 


<script type="text/javascript"> 


ees 
document.write("Hello World!") 
//--> 


</script> 


VBScript: 


<script type="text/vbscript"> 


aes 

document .write("Hello World!") 
'_.> 

</script> 

<script> 定义 客户 端 脚本 。 


<noscript> 为 不 支持 客户 端 脚本 的 浏览 器 定义 替代 内 容 。 


HTML 字符 实体 


HTML 中 的 预 留 字符 必须 被 替换 为 字符 实体 。 


HTML 实体 


在 HTML 中 ， 某 些 字符 是 预 留 的 。 
在 HTML 中 不 能 使 用 小 于 号 (<) 和 大 于 号 (>) ， 这 是 因为 浏览 器 会 误 认 为 它们 


ZET Bo 


如 果 和 希望 正确 地 显示 预 留 字符 ， 我 们 必须 在 HTML 源 代码 中 使 用 字符 实体 
(character entities) 。 


字符 实体 类 似 这 样 : 
& entity name ; 
或 者 


&#_entity_number_; 


如 需 显 示 小 于 号 ， 我 们 必须 这 样 写 : < 或 < 


提示 : 使 用 实体 名 而 不 是 数字 的 好 处 是 ， 名 称 易于 记忆 。 不 过 坏处 是 ， 浏 览 器 也 许 
并 不 支持 所 有 实体 名 称 (对 实体 数字 的 支持 却 很 好 ) 。 


不 间断 空格 (non-breaking space) 


HTML 中 的 常用 字符 实体 是 不 间断 空格 ( )。 


浏览 器 总 是 会 截 短 HTML 如 果 您 在 文本 中 写 10 个 空格 ， 在 显示 该 
页 面 之 前 ， 浏 览 器 会 删除 它们 中 的 9 个 。 如 需 在 页 面 中 增加 空 格 的 数量 ， 您 需要 使 
用 字符 实体 。 


HTML 实例 示例 


用 HTML 实体 符号 做 实验 : 


HTML 中 有 用 的 字符 实体 


注释 : 实体 名 称 对 大 小 写 敏 感 ! 


H 

HA 
欧元 
小 节 
版 权 
注册 商标 
商标 
乘 号 
除 号 


&nbsp; 
&lt; 
&gt; 
&amp; 
&quot; 


实体 名 称 


&apos; (IE 不 支持 ) 


&cent; 
&pound; 
&yen; 
&euro; 
&sect; 
&copy; 
&reg; 
&trade; 
&times; 


&divide; 


实体 编号 


&#160; 
&#60; 
&162; 
&#38; 
&#34; 
&#39; 
&#162; 
&#163; 
&#165; 
&#8364; 
&#167; 
&#169; 
&#174; 
&18482; 
&#215; 
&#247; 


如 需 完整 的 实体 符号 参考 ， 请 访问 我 们 的 HTML 实体 符号 参考 手册 。 


HTML 统一 资源 定位 器 


URL 也 被 称 为 网 址 。 


URL 可 以 由 单词 组 成 ， 比 如 “w3school.com.cn”， 或 者 是 因特网 协议 (IP) 地 址 : 
192.168.1.253。 大 多 数 人 在 网 上 冲浪 时 ， 会 键入 网 址 的 域名 ， 因为 名 称 比 数字 容易 
记忆 。 


URL - Uniform Resource Locator 

当 您 点 击 HTML 页 面 中 的 某 个 链接 时 ， 对 应 的 <a> 标签 指向 万 维 网 上 的 一 个 地 
址 。 

统一 资源 定位 器 (URL) 用 于 定位 万 维 网 上 的 文档 (或 其 他 数据 ) 。 

网 址 ， 比 如 http://www.w3school.com.cn/html/index.asp， 遵 守 以 下 的 语法 规则 : 


scheme: //host.domain:port/path/filename 


解释 : 


e scheme - 定义 因特网 服务 的 类 型 。 最 常见 的 类 型 是 http 

e host- 定义 域 主机 (http 的 默认 主机 是 www) 

e domain - 定义 因特网 域名 ， 上 比如 w3school.com.cn 

e :port - 定义 主机 上 的 端口 号 (http 的 默认 端口 号 是 80) 

e path - 定义 服务 器 上 的 路 径 〈 如 果 省 略 ， 则 文档 必须 位 于 网 站 的 根 目 录 中 ) 。 
e filename - 定义 文档 /资源 的 名 称 


编者 注 : URL 的 英文 全 称 是 Uniform Resource Locator， 中 文 也 译 为 “统一 资源 定 
位 符 ”。 


URL Schemes 

以 下 是 其 中 一 些 最 流行 的 scheme : 
Scheme 访问 HAF... 
http 超 文本 传输 协议 以 http:/ 开头 的 普通 网 页 。 不 加 密 。 
https 安全 超 文本 传输 协议 安全 网 页 。 加 密 所 有 信息 交换 。 
ftp 文件 传输 协议 用 于 将 文件 下 载 或 上 传 至 网 站 。 


file 您 计算 机 上 的 文件 。 


HTML URL 字符 编码 


URL 编码 会 将 字符 转换 为 可 通过 因特网 传输 的 格式 。 


URL - 统一 资源 定位 器 
Web 浏览 器 通过 URL 从 web 服务 器 请 求 页 面 。 
URL 是 网 页 的 地 址 ， 上 比如 http:/www.w3school.com.cn。 


URL 编码 


URL 只 能 使 用 ASCII 字符 集 来 通过 因特网 进行 发 送 。 
由 于 URL 常常 会 包含 ASCII 集合 之 外 的 字符 ，URL 必须 转换 为 有 效 的 ASCII 格 


zo 


URL 编码 使 用 "96" 其 后 跟随 两 位 的 十 六 进 制 数 来 替换 非 ASCII 字符 。 
URL 不 能 包含 空格 。URL 编码 通常 使 用 + 来 替换 空格 。 


亲 目 试 一 试 


如 果 您 点 击 下 面 的 “提交” 按钮， 浏览 器 会 在 发 送 输入 之 前 对 其 进行 URL 编码 。 服 务 
器 上 的 页 面 会 显示 出 接收 到 的 输入 。 


| — Submit 


试 着 输入 一 些 字符 ， 然 后 再 次 点 击 提交 按钮。 





URL 编码 示例 


字符 URL 编码 


€ 7080 
£ HA3 

%AQ 
? %AE 
à %C0 
á %C1 
? %C2 
f 7o C3 
? 7o C4 
? %C5 


如 需 完 整 的 URL 编码 参考 ， 请 访问 我 们 的 URL 编码 参考 手册 。 


HTML Web Server 


如 果 希 望 向 世界 发 布 您 的 网 站 ， 那 么 您 必须 把 它 存 放 在 web 服务 器 上 。 


托管 自己 的 网 站 
在 自己 的 服务 器 上 托管 网 站 始终 是 一 个 选项 。 有 几 点 需要 考虑 : 


硬件 支出 


如 果 要 运行 "真正 ?的 网 站 ， 您 不 得 不 购买 强大 的 服务 器 硬件 。 不 要 指望 低 价 的 PC 
能 够 应 付 这 些 工 作 。 您 还 需要 稳定 的 (一 天 24 小 时 ) 高 速 连接 。 


软件 支出 


请 记 住 ， 服 务 器 授权 通常 比 客户 端 授权 更 昂贵 。 同 时 请 注意 ， 服 务 器 授权 也 许 有 用 
户 数量 限制 。 


AIR 


不 要 指望 低廉 的 人 工 费 用 。 您 必须 安装 自己 的 硬件 和 软件 。 您 同时 要 处理 漏 洞 和 病 
毒 ， 以 确保 您 的 服务 器 时 刻 正常 地 运行 于 一 个 “任何 事 都 可 能 发 生 ” 的 环境 中 。 


使 用 因特网 服务 提供 商 (ISP) 


从 ISP 租用 服务 器 也 很 常见 
大 多 数 小 公司 会 把 网 站 存放 到 由 ISP 提供 的 服务 器 上 。 其 优势 有 以 下 几 点 : 


连接 速度 
ASM ISP 都 拥有 连接 因特网 的 高 速 连接 。 
强大 的 硬件 


ISP BY web 服务 器 通常 强大 到 能 够 由 若干 网 站 分 享 资源 。 您 还 要 看 一 下 ISP 是 否 提 
供 高 效 的 负载 平衡 ， 以 及 必要 的 各 份 服务 器 。 


安全 性 和 可 靠 性 


ISP 是 网 站 托管 方面 的 专家 。 他 们 应 该 提供 99% 以 上 的 在 线 时 间 ， 最 新 的 软件 补 
丁 ， 以 及 最 好 的 病毒 防护 。 


选择 ISP 时 的 注意 事项 


24 小 时 支持 
确保 ISP 提供 24 小 时 支持 。 不 要 使 自己 置 于 无 法 解决 严重 问题 的 元 坎 境地 ， 同 时 


还 必须 等 待 第 二 个 工作 日 。 如 果 您 不 希望 支付 长 途 电 话费 ， 那 么 免费 电话 服务 也 是 
必要 的 。 


日 备份 
确保 ISP 会 执行 每 日 备份 的 例 行 工 作 ， 否 则 您 有 可 能 损失 有 价值 的 数据 。 





一 下 ISP 的 流量 限制 。 如 果 出 现 由 于 网 站 受 欢 迎 而 激增 的 不 可 预期 的 访问 量 ， 
您 要 确保 不 会 因此 支付 额外 费用 。 


带宽 或 内 容 限 制 


研究 一 下 ISP 的 带宽 和 内 容 限 制 。 如 果 您 计划 发 布 图 片 或 播 出 视频 或 音频 ， 请 确保 
您 有 此 权限 。 


So 
Dd 


E-mail 功能 

请 确保 ISP 支持 您 需要 的 e-mail 功能 。 

数据 库 访问 

如 果 您 计划 使 用 网 站 数据 库 中 的 数据 ， 那 么 请 确保 您 的 ISP 支持 您 需要 的 数据 库 访 


问 。 


在 您 选取 一 家 ISP 之 前 ， 请 务必 阅读 W3School 的 Web 主机 教程 。 


HTML 媒体 


HTML 多 媒体 


Web 上 的 多 媒体 指 的 是 音效 、 音 乐 、 视 频 和 动画 
现代 网 络 浏览 器 已 支持 很 多 多 媒体 格式 。 


什么 是 多 媒体 ? 

多 媒体 来 自 多 种 不 同 的 格式 。 宫 可 以 是 您 听 到 或 到 的 任何 内 容 ， 文 字 、 国 片 、 音 
、 音 效 、 影 、 动 画 等 等 

在 因特网 上 ， 您 会 经 常 发 现 谋 入 网 页 中 的 多 媒体 元 素 ， 现 代 浏览 器 已 支持 多 种 多 媒 
体格 式 。 

在 本 教程 中 ， 您 类 了 解 到 不 同 的 多 媒体 格式 ， 以 及 如 何在 您 的 网 页 中 使 用 它们 。 
浏览 器 支持 


第 一 款 因 特 网 浏览 器 只 支持 文本 ， 而 且 即 使 是 对 文本 的 支持 也 仅 限于 单一 字体 和 单 
一 颜色 。 随 后 诞生 了 支持 颜色 、 字 体 和 文本 样式 的 浏览 器 ， 图 片 支持 也 被 加 入 。 


不 同 的 浏览 器 以 不 同 的 方式 处 理 对 音效 、 动 田 和 视频 的 支持 。 某 些 元 素 能 够 以 内 联 
的 方式 人 处理， 而 某 些 则 需要 额外 的 插件 。 


您 将 在 下 面 的 章节 学 习 更 多 有 关 插 件 的 知识 。 


多 媒体 格式 


多 媒体 元 素 (比如 视频 和 音频 ) 存储 于 媒体 文件 中 。 


确定 媒体 类 型 的 最 常用 的 方法 是 查看 文件 扩展 名 。 当 浏览 器 得 到 文件 扩展 名 .htm 
或 .html 时 ， 它 会 假定 该 文件 是 HTML 页面 。.xml 扩展 名 指示 XML 文件 ， 而 .css 
扩展 名 指示 样式 表 。 图 片 格式 则 通过 gif 或 jpg 来 识别 


多 媒体 元 素 元 素 也 拥有 带 有 不 同 扩展 名 的 文件 格式 ， 比 如 .swf、.wmv、.mp3 以 及 
.mp4。 


视频 格式 


MP4 格式 是 一 种 新 的 即将 普及 的 因特网 视频 格式 。HTML5 Flash 播放 器 以 及 优 
酷 等 视频 网 站 均 支 持 它 。 


格式 


AVI 


WMV 


MPEG 


QuickTime 


RealVideo 


Flash 


Mpeg-4 


文件 


avi 


.WMV 


.mpg 
.mpeg 


.mov 


-mm 
am 


.swf 
flv 


.mp4 


描述 


AVI (Audio Video Interleave) 格式 是 由 微软 开发 的 。 所 
有 运行 Windows 的 计算 机 都 支持 AVI 格式 。 它 是 因 特 
网 上 很 常见 的 格式 ， 但 非 Windows 计算 机 并 不 总 是 能 
够 播放 。 


Windows Media 格式 是 由 微软 开发 的 。Windows 
Media 在 因特网 上 很 常见 ， 但 是 如 果 未 安装 额外 的 ( 免 
费 ) 组 件 ， 就 无 法 播放 Windows Media 电影 。 一 些 后 
期 的 Windows Media 电影 在 所 有 非 Windows 计算 机 上 
都 无 法 播放 ， 因 为 没有 合适 的 播放 器 。 


MPEG (Moving Pictures Expert Group) 格式 是 因特网 
上 最 流行 的 格式 。 它 是 跨 平台 的 ， 得 到 了 所 有 最 流行 的 
浏览 器 的 支持 。 


QuickTime 格式 是 由 茶 果 公司 开发 的 。QuickTime =A 
特 网 上 常见 的 格式 ， 但 是 QuickTime 电影 不 能 在 没有 
安装 额外 的 (免费 ) 组 件 的 Windows 计算 机 上 播放 。 


RealVideo 格式 是 由 Real Media 针对 因特网 开发 的 。 
该 格式 允许 低 带 宽 条 件 下 (在 线 视频 、 网 络 电 视 ) 的 视 
频 流 。 由 于 是 低 带 宽 优 先 的 ， 质 量 常会 降低 。 


Flash (Shockwave) 格式 是 由 Macromedia 开发 的 。 
Shockwave 格式 需要 额外 的 组 件 来 播放 。 但 是 该 组 件 
会 预 装 到 Firefox 或 IE 之 类 的 浏览 器 上 。 


Mpeg-4 (with H.264 video compression) 是 一 种 针对 因 
特 网 的 新 格式 。 事 实 上 ，YouTube 推荐 使 用 MP4。 
YouTube 接收 多 种 格式 ， 然 后 全 部 转换 为 .flv 或 .mp4 
以 供 分 发 。 越 来 越 多 的 视频 发 布 者 转 到 MPA, HAE 
为 Flash 播放 器 和 HTML5 的 因特网 共享 格式 。 


格式 


MIDI 


RealAudio 


Wave 


WMA 


MP3 


使 用 哪 种 格式 ? 


文件 


.WaV 


.Wma 


.mp3 
.mpga 


描述 


MIDI (Musical Instrument Digital Interface) 是 一 种 针对 
电子 音乐 设备 (比如 合成 器 和 声卡 ) 的 格式 。MIDI 文件 
不 含有 声音 ， 但 包含 可 被 电子 产品 (比如 声卡 ) 播放 的 
数字 音乐 指令 。 点 击 这 里 播放 The Beatles. 因为 
MIDI RASS, ATLA MIDI 文件 极其 小 巧 。 上 面 
的 例子 只 有 23k 的 大 小 ， 但 却 能 播放 将 近 5 分 钟 。MIDI 
得 到 了 广泛 的 平台 上 的 大 量 软 件 的 支持 。 大 多 数 流行 的 
网 络 浏览 器 都 支持 MIDI. 


RealAudio 格式 是 由 Real Media 针对 因特网 开发 的 。 
该 格式 也 支持 视频 。 该 格式 允许 低 带 宽 条 件 下 的 音频 流 
(在 线 音 乐 、 网 络 音乐 ) 。 由 于 是 低 带 宽 优 先 的 ， 质 量 
常会 降低 。 


Wave (waveform) 格式 是 由 IBM 和 微软 开发 的 。 所 有 运 
行 Windows 的 计算 机 和 所 有 网 络 浏览 器 (除了 Google 
Chrome) 都 支持 它 。 


WMA 格式 (Windows Media Audio)， 质 量 优 于 MP3, 
兼容 大 多 数 播放 器 ， 除 了 iPod, WMA 文件 可 作为 连续 
的 数据 流 来 传输 ， 这 使 它 对 于 网 络 电 台 或 在 线 音 乐 很 实 
用 。 

MP3 文件 实际 上 是 MPEG 文件 的 声音 部 分 。MPEG 格 
式 最 初 是 由 运动 图 像 专家 组 开发 的 。MP3 是 其 中 最 受 欢 
迎 的 针对 音乐 的 声音 格式 。 期 待 未 来 的 软件 系统 都 支持 


Go 


WAVE 是 因特网 上 最 受 欢迎 的 无 压缩 声音 格式 ， 所 有 流行 的 浏览 器 都 支持 它 。 如 果 


您 需要 未 经 压缩 的 声音 


音乐 或 演讲 ) ， 那 么 您 应 该 使 用 WAVE 格式 。 


MP3 是 最 新 的 压缩 录制 音乐 格式 。MP3 这 个 术语 已 经 成 为 数字 音乐 的 代名词 。 如 
果 您 的 网 址 从 事 录 制 音乐 ， 那 么 MP3 是 一 个 选项 。 


HTML Object 元 素 


<object> 的 作用 是 支持 HTML 助手 (插件 ) 。 


HTML 助手 (插件 ) 
xr E ud 
为 插件 。 


辅助 程序 可 用 于 播放 音频 和 视频 (以 及 其 他 ) 。 辅 助 程序 是 使 用 <object> 标签 来 加 
载 的 。 


i 的 一 个 优势 是 ， 您 能 够 允许 用 户 来 控制 部 分 或 全 部 播 
设置 。 


大 多 数 辅 助 应 用 程序 允许 对 音量 设置 和 播放 功能 〈 比 如 后 退 、 暂 停 、 停 止 和 播放 ) 
的 手工 (或 程序 的 ) 控制 。 


在 HTML 中 播放 视频 的 最 好 方式 ? 


如 需 了 解 在 HTML 中 包含 音 视频 的 最 好 方法 ， 请 参阅 下 一 章节 。 


使 用 QuickTime 来 播放 Wave 53 
实例 


<object width="420" height="360" 
classid="clsid:02BF25D5 - 8C17 -4B23 -BC80-D3488ABDDC6B" 
codebase="http://ww.apple.com/qtactivex/qtplugin.cab"> 
<param name="src" value="bird.wav" /> 

<param name="controller" value="true" /> 

</object> 


使 用 QuickTime 来 播放 MP4 视频 


实例 


<object width="420" height="360" 
classid="clsid:02BF25D5 -8C17 - 4B23 -BC80 -D3488ABDDC6B" 
codebase="http://ww.apple.com/qtactivex/qtplugin.cab"> 
«param name-"src" value="movie.mp4" /> 

<param name="controller" value="true" /> 

</object> 


使 用 Flash 来 播放 SWF 视频 
实例 


<object width="400" height="40" 
classid="clsid:d27cdb6e-ae6d -11cf -96b8 -444553540000" 
codebase="http://fpdownload.macromedia.com/ 
pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"> 
<param name="SRC" value="bookmark.swf"> 

<embed src="bookmark.swf" width="400" height="40"></embed> 
</object> 


使 用 Windows Media Player 来 播放 WMV 32 
下 面 的 例子 展示 用 于 播放 Windows 媒体 文件 的 推荐 代码 : 


实例 


<object width="100%" height="100%" 

type="video/x-ms-asf" url="3d.wmv" data="3d.wmv" 

classid="CLSID: 6BF52A52-394A-11d3-B153-00CO4F79FAA6"> 

<param name="url" value="3d.wmv"> 

«param name="filename" value="3d.wmv"> 

<param name="autostart" value="1"> 

<param name="uiMode" value="full" /> 

<param name="autosize" value="1"> 

<param name="playcount" value="1"> 

<embed type="application/x-mplayer2" src="3d.wmv" width="100%" 
height="100%" autostart="true" showcontrols="true" 
pluginspage="http://www.microsoft .com/wWindows/MediaPlayer/"></embec 

</object> 


uu — "^————— À MÀ Ó 





HTML 音频 


在 HTML 中 播放 声音 的 方法 有 很 多 种 。 


问题 ， 问 题 ， 以 及 解决 方法 

在 HTML 中 播放 音频 并 不 容易 ! 

您 需要 说 熟 大 量 技巧 ， 以 确保 您 的 音频 文件 在 所 有 浏览 器 中 (Internet Explorer, 
Chrome, Firefox, Safari, Opera) 和 所 有 硬件 上 (PC, Mac, iPad, iPhone) 都 能 够 
播放 。 


在 本 章 ，W3School 为 您 总 结 了 问题 和 解决 方法 。 


使 用 插件 

浏览 器 插件 是 一 种 扩展 浏览 器 标准 功能 的 小 型 计算 机 程序 。 
插件 有 很 多 用 途 : 播放 音乐 、 显 示 地 图 、 验 证 银行 账号 ， 控 制 输入 等 等 。 
可 使 用 «object» 或 «embed» 标签 来 将 插件 添加 到 HTML 页 面 。 


这 些 标签 定义 资源 (通常 非 HTML 资源 ) 的 容器 ， 根 据 类 型 ， 它 们 即 会 由 浏览 器 显 
示 ， 也 会 由 外 部 插件 显示 。 


使 用 <embed> 元 素 


<embed> 标签 定义 外 部 (JE HTML) 内 容 的 容器 。 (这 是 一 个 HTML5 标签 ， 在 
HTML4 中 是 非法 的 ， 但 是 所 有 浏览 器 中 都 有 效 ) 。 


下 面 的 代码 片段 能 够 显示 嵌入 网 页 中 的 MP3 文件 : 
实例 


<embed height="100" width="100" src="song.mp3" /> 


问题 : 


e <embed> 标签 在 HTML 4 中 是 无 效 的 。 页 面 无 法 通过 HTML 4 验证 。 
e. 不 同 的 浏览 器 对 音频 格式 的 支持 也 不 同 。 

e 如 果 浏 览 器 不 支持 该 文件 格式 ， 没 有 插件 的 话 就 无 法 播放 该 音频 。 

e 如 果 用 户 的 计算 机 未 安装 插件 ， 无 法 播放 音频 。 


e. 如 果 把 该 文件 转换 为 其 他 格式 ， 仍 然 无 法 在 所 有 浏览 器 中 播放 。 
注释 : 使 用 <!IDOCTYPE html» (HTML5) 解决 验证 问题 。 


使 用 <object> 元 素 


«object tag» 标签 也 可 以 定义 外 部 (JE HTML) 内 容 的 容器 。 
下 面 的 代码 片段 能 够 显示 能 入 网 页 中 的 MP3 文件 : 


实例 


«object height="100" width="100" data="song.mp3"></object> 


问题 : 


。 不 同 的 浏览 器 对 音频 格式 的 支持 也 不 同 。 

。 如 果 浏 览 器 不 支持 该 文件 格式 ， 没 有 插件 的 话 就 无 法 播放 该 音频 。 
e 如 果 用 户 的 计算 机 未 安装 插件 ， 无 法 播放 音频 。 

e. 如 果 把 该 文件 转换 为 其 他 格式 ， 仍 然 无 法 在 所 有 浏览 器 中 播放 。 


使 用 HTML5 «audio» 元 素 


«audio» 元 素 是 一 个 HTML5 元 素 ， 在 HTML 4 中 是 非法 的 ， 但 在 所 有 浏览 器 中 都 
有 效 。 


实例 


<audio controls="controls"> 
<source src="song.mp3" type="audio/mp3" /> 
<source src="song.ogg" type="audio/ogg" /> 
Your browser does not support this audio format. 
</audio> 


上 面 的 例子 使 用 了 一 个 mp3 文件 ， 这 样 它 在 Internet Explorer, Chrome 以 及 
Safari 中 是 有 效 的 。 

为 了 使 这 段 音频 在 Firefox 和 Opera 中 同样 有 效 ， 添 加 了 一 个 ogg 类 型 的 文件 。 如 
果 失 败 ， 会 显示 错误 消息 。 

问题 : 


e «audio» 标签 在 HTML 4 中 是 无 效 的 。 您 的 页 面 无 法 通过 HTML 4 验证 。 


e 您 必须 把 音频 文件 转换 为 不 同 的 格式 。 
e «audio» 元 素 在 老式 浏览 器 中 不 起 作用 。 


注释 : 使 用 <!IDOCTYPE html» (HTML5) 解决 验证 问题 。 
最 好 的 HTML 解决 方法 


实例 


<audio controls="controls" height="100" width="100"> 
«source src="song.mp3" type="audio/mp3" /> 
<source src="song.ogg" type="audio/ogg" /> 
«embed height="100" width="100" src="sSong.mp3" /> 
</audio> 


上 面 的 例子 使 用 了 两 个 不 同 的 音频 格式 。HTML5 «audio» 元 素 会 党 试 以 mp3 或 
ogg 来 播放 音频 。 如 果 失 败 ， 代 码 将 回 退 党 试 <embed> 元 素 。 


问题 : 
您 必须 把 音频 转换 为 不 同 的 格式 。 
<audio> 元 素 无 法 通过 HTML 4 和 XHTML 验证 。 


<embed> 元 素 无 法 通过 HTML 4 和 XHTML 验证 。 
<embed> 元 素 无 法 回 退 来 显示 错误 消息 。 


注释 : 使 用 <!IDOCTYPE html» (HTML5) 解决 验证 问题 。 


癌 网 站 添加 音频 的 最 简单 方法 


向 网 页 添加 音频 的 最 简单 的 方法 是 什么 ? 
雅虎 的 媒体 播放 器 绝对 算 其 中 之 一 。 


Pa 只 需 简单 地 让 雅虎 来 完成 歌曲 播放 的 工 
就 好 了 。 


mp3 以 及 一 系列 其 他 格式 。 一 行 简 单 的 代码 ， 您 就 可 以 把 它 添加 到 
页 中 ， 轻 松 地 将 HTML ARED LU, 


雅虎 媒体 播放 器 
实例 


<a href="song.mp3">Play Sound</a> 


«script type="text/javascript" src="http://mediaplayer .yahoo.com/j: 
</script> 


«| un 





D 








使 用 雅虎 播放 器 是 免费 的 。 如 需 使 用 它 ， 您 需要 把 这 段 JavaScript 插入 网 页 底部 : 
«script type="text/javascript" src="http://mediaplayer .yahoo.com/j: 
sj EGER] 1 


然后 只 需 简单 地 把 MP3 文件 链接 到 您 的 HTML A, JavaScript 会 自动 地 为 每 首 歌 
创建 播放 按钮 : 








«a href="song1.mp3">Play Song 1</a> 
<a href="song2.mp3">Play Song 2</a> 


雅虎 媒体 播放 器 为 您 的 用 户 提供 的 是 一 个 小 型 的 播放 按钮 ， 而 不 是 完整 的 播放 器 。 
不 过 ， 当 您 点 击 该 按钮 ， 会 弹出 完整 的 播放 器 。 


请 注意 ， 这 个 播放 器 始终 停靠 在 窗 框 底部 。 只 需 点 击 它 ， 就 可 将 其 滑 出 。 
使 用 超 链 接 
如 果 网 页 包 全 指向 媒体 文件 的 超 链 接 ， 大 多 数 浏 和 器 会 使 用 ' 畏 助 应 用 程序 "来 播放 


以 下 代码 片段 显示 指向 mp3 文件 的 链接 。 如 果 用 户 点 击 该 链接 ， 浏 览 器 会 启动 "十 
助 应 用 程序 "来 播放 该 文件 : 


实例 
<a href="song.mp3">Play the sound</a> 


内 联 的 声音 
当 您 在 网 页 中 包含 声音 ， 或 者 作为 网 页 的 组 成 部 分 时 ， 它 被 称 为 内 联 声音 。 


TA A 同时 请 ; 注意 ， M HECRT IY. ener 百 选 选项 。 


我 们 最 好 的 建议 是 只 在 用 户 和 希望 听 到 内 联 声音 的 地 方 包含 它们 。 一 个 正面 的 例子 
是 ， 在 用 户 需 要 听 到 录音 并 点 击 某 个 链接 时 ， 会 打开 页 面 然 后 播放 录音 。 


HTML 4.01 多 媒体 标签 


<applet> To LAER applet. 
<embed> HTML4 中 不 赞成 ，HTML5 Piit ELARGIR. 
<object> TELA BR It RR 
<param> 定义 对 象 的 参数 。 
HTML 5 多 媒体 标签 
<audio> 标签 定义 声音 ， 比如 音 日 IS 或 其 他 音 A pil 流 o 
«embed» ERARRGUBRABSUPGE, ealik. 


HTML 视频 


ft HTML 中 播放 视频 的 方法 有 很 多 种 。 


«video width="320" height="240" controls="controls"> 
<source src="movie.mp4" type="video/mp4" /> 
<source src="movie.ogg" type="video/ogg" /> 
«source src="movie.webm" type="video/webm" /> 
<object data="movie.mp4" width="320" height="240"> 

<embed src="movie.swf" width="320" height="240" /> 

</object> 

</video> 


问题 ， 问 题 ， 以 及 解决 方法 
在 HTML 中 播放 视频 并 不 容易 ! 
您 需要 说 熟 大 量 技巧 ， 以 确保 您 的 视频 文件 在 所 有 浏览 器 中 (Internet Explorer, 


Chrome, Firefox, Safari, Opera) 和 所 有 硬件 上 (PC, Mac, iPad, iPhone) 都 能 够 
播放 。 


在 本 章 ，W3School 为 您 总 结 了 问题 和 解决 方法 。 

使 用 <embed> 标签 

<embed> 标签 的 作用 是 在 HTML 5i [Ei PRA SHAT. 
下 面 的 HTML 代码 显示 伐 入 网 页 的 Flash 视频 : 


实例 


<embed src="movie.swf" height="200" width="200"/> 


问题 


e HTML4 无 法 识别 <embed> 标签 。 您 的 页 面 无 法 通过 验证 。 
e 如 果 浏 览 器 不 支持 Flash， 那 么 视频 将 无 法 播放 
e iPad 和 iPhone 不 能 显示 Flash 视频 。 


。 如 果 您 将 视频 转换 为 其 他 格式 ， 那 么 它 仍 然 不 能 在 所 有 浏览 器 中 播放 。 


使 用 <object> 标签 


<object> 标签 的 作用 是 在 HTML 页 面 中 嵌入 多 媒体 元 素 。 
下 面 的 HTML Fr E € zn Bg A [9] 5: P3—E& Flash 视频 : 


实例 


<object data="movie.swf" height="200" width="200"/> 


问题 
e 如 果 浏 览 器 不 支持 Flash， 将 无 法 播放 视频 。 
e iPad 和 iPhone 不 能 显示 Flash 视频 。 
e 如 果 您 将 视频 转换 为 其 他 格式 ， 那 么 它 仍 然 不 能 在 所 有 浏览 器 中 播放 。 


使 用 «video» 标签 


«video» 是 HTML 5 中 的 新 标签 。 
«video» 标签 的 作用 是 在 HTML RM PRAM MICH. 
以 下 HTML 片段 会 显示 一 段 戏 入 网 页 的 ogg、mp4 或 webm 格式 的 视频 : 


实例 


<video width="320" height="240" controls="controls"> 
<source src="movie.mp4" type="video/mp4" /> 
<source src="movie.ogg" type="video/ogg" /> 
«source src="movie.webm" type="video/webm" /> 

Your browser does not support the video tag. 

</video> 


问题 
。 您 必须 把 视频 转换 为 很 多 不 同 的 格式 。 


e «video» 元 素 在 老式 浏览 器 中 无 效 。 
e «video» 元 素 无 法 通过 HTML 4 和 XHTML 验证 。 


最 好 的 HTML 解决 方法 


HTML 5 + <object> + <embed> 


<video width="320" height="240" controls="controls"> 
<source src="movie.mp4" type="video/mp4" /> 
«source src="movie.ogg" type="video/ogg" /> 
«source src="movie.webm" type="video/webm" /> 
<object data="movie.mp4" width="320" height="240"> 

<embed src="movie.swf" width="320" height="240" /> 

</object> 

</video> 


上 例 中 使 用 了 4 中 不 同 的 视频 格式 。HTML 5 «video» 元 素 会 党 试播 放 以 mp4, 
ogg 或 webm 格式 中 的 一 种 来 播放 视频 。 如 果 均 失败 ， 则 回 退 到 <embed> 元 素 。 
问题 

e. 您 必须 把 视频 转换 为 很 多 不 同 的 格式 

e «video» 元 素 无 法 通过 HTML 4 和 XHTML 验证 。 

e <embed> 元 素 无 法 通过 HTML 4 和 XHTML 验证 。 
注释 : 使 用 <!IDOCTYPE html» (HTML5) 解决 验证 问题 。 


优酷 解决 方案 

在 HTML 中 显示 视频 的 最 简单 的 方法 是 使 用 优酷 等 视频 网 站 。 

如 果 您 希望 在 网 页 中 播放 视频 ， 那 么 您 可 以 把 视频 上 传 到 优酷 等 视频 网 站 ， 然 后 在 
您 的 网 页 中 插入 HTML 代码 即 可 播放 视频 : 


«embed src="http://player .youku.com/player .php/sid/XMzZI2NTC4NTMy/v 
width="480" height="400" 

type="application/x-shockwave-flash"> 

</embed> 


[E 


使 用 超 链 接 


27 页 包含 指向 媒体 文件 的 超 链接 ， 大 多 数 浏览 器 会 使 用 “辅助 应 用 程序 "来 播放 


以 下 代码 片段 显示 指向 AVI 文件 的 链接 。 如 果 用 户 点 击 该 链接 ， 浏 览 器 会 启动 “ 辅 
助 应 用 程序 ”， 比 如 Windows Media Player 来 播放 这 个 AVI 文件 : 





实例 


<a href="movie.swf">Play a video file</a> 


天 于 内 联 视频 的 一 段 注释 
当 视频 被 包含 在 网 页 中 时 ， 它 被 称 为 内 联 视频 。 


如 果 您 打算 在 web 应 用 程序 中 使 用 内 联 视频 ， 您 需要 意识 到 很 多 人 都 觉得 内 联 视频 
DAWK 


同时 请 注意 ， 用 户 可 能 已 经 关闭 了 浏览 器 中 的 内 联 视频 选项 。 


我 们 最 好 的 建议 是 只 在 用 户 希 望 看 到 内 联 视频 的 地 方 包含 它 们 。 一 个 正面 的 例子 
是 ， 在 用 户 需 要 看 到 视频 并 点 击 某 个 链接 时 ， 会 打开 页 面 然 后 播放 视频 。 


HTML 4.01 多 媒体 标签 


标签 描述 
<applet> TR ELAR applet. 
<embed> TRR TEL ARR tR, (HTML5 中 人 允许) 
<object> ELARGIR. 
<param> 定义 对 象 的 参数 。 


HTML 5 多 媒体 标签 


标签 描述 
<video> 标签 定义 声音 ， 上 比如 音乐 或 其 他 音频 流 。 
<embed> 标签 定义 区 入 的 内 容 ， 上 比如 插件 。 


HTML XHTML 


XHTML 简介 


XHTML 是 以 XML 格式 编写 的 HTML. 


什么 是 XHTML ? 


e XHTML 指 的 是 可 扩展 超 文本 标记 语言 

e XHTML 与 HTML 4.01 几乎 是 相同 的 

e XHTML 是 更 严格 更 纯净 的 HTML 版 本 

e XHTML 是 以 XML 应 用 的 方式 定义 的 HTML 

e XHTML 是 2001 年 1 月 发 布 的 W3C 推荐 标准 
e XHTML 得 到 所 有 主流 浏览 器 的 支持 


为 什么 使 用 XHTML? 


因特网 上 的 很 多 页 面包 含 了 "糟糕 "的 HTML. 


如 果 在 浏览 器 中 查看 ， 下 面 的 HTML 代码 运行 起 来 非常 正常 〈 即 使 它 并 未 遵守 
HTML 规则 ) 


«html» 

«head» 

<title>This is bad HTML</title> 
<body> 

<hi>Bad HTML 

<p>This is a paragraph 

</body> 


XML 是 一 种 必须 正确 标记 且 格 式 良 好 的 标记 语言 。 

如 果 和 希望 学 习 XML， 请 阅读 我 们 的 XML 教程 。 

今日 的 科技 界 存 在 一 些 不 同 的 浏览 器 技术 。 其 中 一 些 在 计算 机 上 运行 ， 而 另 一 些 可 
能 在 移动 电话 或 其 他 小 型 设 各 上 运行 。 小 型 设 各 往往 缺乏 解释 “ 粮 粒 ”的 标记 语言 的 
资源 和 能 力 。 


所 以 - 通过 结合 XML 和 HTML 的 长 处 ， 开 发 出 了 XHTML, XHTML 是 作为 XML 
被 重新 设计 的 HTML。 


与 HTML 相 比 最 重要 的 区 别 : 


文档 结构 


e XHTML DOCTYPE 是 强制 性 的 


e «html» 中 的 XML namespace 属性 是 强制 性 的 
e «html», «head», «title» 以 及 <body> 也 是 强制 性 的 


元 素 语 法 


XHTML TRV EARE 
XHTML 元 素 必 须 始终 关闭 
XHTML 元 素 必须 小 写 

XHTML 文档 必须 有 一 个 根 元 素 


属性 语法 


e XHTML 属性 必须 使 用 小 写 
e XHTML 属性 值 必 须 用 引号 包围 
e XHTML 属性 最 小 化 也 是 禁止 的 


«IDOCTYPE ....> 是 强制 性 的 


XHTML 文档 必须 进行 XHTML 文档 类 型 声明 (XHTML DOCTYPE declaration) 。 
您 可 以 在 W3School 的 标签 参考 手册 中 找到 完整 的 XHTML 文档 类 型 。 


«html», «head», «title» 以 及 <body> 元 素 也 必须 存在 ， 并 且 必 须 使 用 «html» 中 
的 xmins 属性 为 文档 规定 xml 命名 空间 。 


下 面 的 例子 展示 了 带 有 最 少 的 必需 标签 的 XHTML 文档 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtm11/DTD/xhtml1-transitional.dtd"- 


«html xmlns-z"http://www.w3.0rg/1999/xhtml"» 
«head» 


<title>Title of document</title> 
</head> 


</body> 


</html> 


如 何 从 HTML 转换 到 XHTML 


1. 向 每 张 页 面 的 第 一 行 添加 XHTML <!DOCTYPE> 
2. 向 每 张 页 面 的 html 元 素 添加 xmlns 属性 


. 把 所 有 元 素 名 改 为 小 写 
. 关闭 所 有 空 元 素 

. 把 所 有 属性 名 改 为 小 写 
. 为 所 有 属性 值 加 引号 


OD oR Ww 


用 W3C 验证 十 检验 XHTML 
在 下 面 的 文本 框 中 输入 您 的 网 址 ; 


<input name="uri" size="60" style-"margin:10px 0 0 0;" 
value-"http://www.w3school.com.cn/html/index.asp"» <input type="submit" 
value=" 验 证 文件 "> 


XHTML 测验 
该 测验 包含 20 道 问题 ， 且 没有 时 间 限 制 。 
本 测验 是 非 正式 的 ， 它 仅仅 是 了 解 您 XHTML 知识 掌握 程度 的 一 个 不 错 的 途径 。 


每 项 正确 答案 可 获得 1 分 。 在 测试 结束 后 ， 会 显示 您 的 总 分 。 最 高 分 为 20 分 。 
开始 XHTML 测验 


XHTML - 元 素 


XHTML 元 素 是 以 XML 格式 编写 的 HTML 元 素 。 


XHTML 元 素 - 语法 规则 


XHTML TRV EARE 
XHTML 元 素 必 须 始终 关闭 
XHTML 元 素 必 须 小 写 

XHTML 文档 必须 有 一 个 根 元 素 


XHTML 705387 Zi IEPA ER S 

在 HTML 中 ， 某 些 元 素 可 以 不 正确 地 彼此 骨 套 在 一 起 ， 就 像 这 样 : 
<b><i>This text is bold and italic</b></i> 

在 XHTML 中 ， 所 有 元 素 必 须 正 确 地 彼此 庶 套 ， 就 像 这 样 : 


<b><i>This text is bold and italic</i></b> 


XHTML TRIKA 


<p>This is a paragraph 
<p>This is another paragraph 


这 是 正确 的 : 


<p>This is a paragraph</p> 
<p>This is another paragraph</p> 


A break: <br> 
A horizontal rule: <hr> 
An image: <img src="happy.gif" alt="Happy face"> 


这 是 正确 的 : 


A break: <br /> 
A horizontal rule: <hr /> 
An image: <img src="happy.gif" alt="Happy face" /> 


XHTML 元 素 必 须 小 写 


<BODY> 
<P>This is a paragraph</P> 
</BODY> 


这 是 正确 的 : 


<body> 
<p>This is a paragraph</p> 
</body> 


XHTML - 属性 
XHTML 属性 是 以 XML 格式 编写 的 HTML 属性 。 


XHTML 属性 - 语法 规则 


e XHTML 属性 必须 使 用 小 写 
e XHTML 属性 值 必 须 用 引号 包围 
e XHTML 属性 最 小 化 也 是 禁止 的 


XHTML 属性 必须 使 用 小 写 
这 是 错误 的 : 
<table WIDTH="100%"> 


这 是 正确 的 : 


<table width="100%"> 


XHTML 属性 值 必 须 用 引号 包围 
这 是 错误 的 : 

<table width=100%> 
这 是 正确 的 : 


<table width="100%"> 


禁止 属性 简写 


<input checked> 

<input readonly> 
<input disabled> 
<option selected> 


这 是 正确 的 : 


«input checked-"checked" /> 
«input readonly="readonly" /> 
<input disabled="disabled" /> 
«option selected-"selected" /> 


CSS 基础 


HTML 5 简介 


HTML5 是 下 一 代 的 HTML. 


什么 是 HTML5 ? 


HTML5 将 成 为 HTML, XHTML 以 及 HTML DOM 的 新 标准 。 
HTML 的 上 一 个 版 本 诞生 于 1999 年 。 自 从 那 以 后 ，Web 世界 已 经 经 历 了 巨变 。 
HTML5 仍 处 于 完善 之 中 。 然 而 ， 大 部 分 现代 浏览 器 已 经 具 各 了 某 些 HTML5 支持 。 


HTML5 是 如 何 起 步 的 ? 


HTML5 是 W3C 与 WHATWG 合作 的 结果 。 
编者 注 : W3C 指 World Wide Web Consortium， 万 维 网 联盟 。 
编者 注 : WHATWG 指 Web Hypertext Application Technology Working Group. 


WHATWG 致力 于 web 表单 和 应 用 程序 ， 而 W3C 专注 于 XHTML 2.0。 在 2006 
年 ， 双 方 决定 进行 合作 ， 来 创建 一 个 新 版 本 的 HTML, 


为 HTML5 建立 的 一 些 规则 : 


。 新 特性 应 该 基于 HTML. CSS. DOM 以 及 JavaScript. 
e 减少 对 外 部 插件 的 需求 (比如 Flash) 

@ 更 优秀 的 错 误 处 理 

e 更 多 取代 脚本 的 标记 

e HTML5 应 该 独立 于 设备 

e 开发 进程 应 对 公众 透明 


新 特性 


HTML5 中 的 一 些 有 趣 的 新 特性 : 


e 用 于 绘画 的 canvas 元 素 
e 用 于 媒介 回放 的 video 和 audio 元 素 
e 对 本 地 离线 存储 的 更 好 的 支持 





新 的 特殊 内 容 元 素 ， 比 如 article, footer, header. nav. section 
新 的 表单 控件 ， 比 如 calendar、date、time、email、url、search 


浏览 器 支持 


最 新 版 本 的 Safari, Chrome, Firefox 以 及 Opera 支持 某 些 HTML5 FFE. Internet 
Explorer 9 将 支持 某 些 HTML5 特性 。 


HTML 5 视频 


许多 时 墅 的 网 站 都 提供 视频 。HTML5 提供 了 展示 视频 的 标准 。 


Web 上 的 视频 


直到 现在 ， 仍 然 不 存在 一 项 旨 在 网 页 上 显示 视频 的 标准 。 


今天 ， 大 多 数 视频 是 通过 插件 (比如 Flash) 来 显示 的 。 然 而 ， 并 非 所 有 浏览 器 都 
拥有 同样 的 插件 。 


HTML5 规定 了 一 种 通过 video 元 素来 包含 视频 的 标准 方法 。 


视频 格式 
当前 ，video 元 素 支 持 三 种 视频 格式 : 
格式 IE Firefox Opera Chrome Safari 
Ogg No 3.5+ 10.5+ 5.0+ No 
MPEG 4 9.0+ No No 5.0+ QUEE 
WebM No 4.0+ 10.6+ 6.0+ No 


Ogg = 带 有 Theora 视频 编码 和 Vorbis 音频 编码 的 Ogg 文件 
MPEG4 = 带 有 H.264 视频 编码 和 AAC 音频 编码 的 MPEG 4 文件 
WebM = #4 VP8 视频 编码 和 Vorbis 音频 编码 的 WebM 文件 


如 何 工作 
如 需 在 HTML5 中 显示 视频 ， 您 所 有 需要 的 是 : 


<video src="movie.ogg" controls="controls"> 
</video> 


control BEER. FSS See. 
包含 宽度 和 高 度 属 性 也 是 不 错 的 主意 。 
«video» 与 </video> 之 间 插 入 的 内 容 是 供 不 支持 video 元 素 的 浏览 器 显示 的 : 


实例 


<video src="movie.ogg" width="320" height="240" controls="controls' 
Your browser does not support the video tag. 
</video> 


E - 
上 面 的 例子 使 用 一 个 Ogg 文件 ， 适 用 于 Firefox、Opera 以 及 Chrome 浏览 器 。 
要 确保 适用 于 Safari 浏览 器 ， 视 频 文 件 必 须 是 MPEG4 类 型 。 


video 元 素 允 许多 个 source 元 素 。 source 元 素 可 以 链接 不 同 的 视频 文件 。 浏 览 器 
将 使 用 第 一 个 可 识别 的 格式 : 








实例 


<video width="320" height="240" controls="controls"> 
<source src="movie.ogg" type="video/ogg"> 
<source src="movie.mp4" type="video/mp4"> 
Your browser does not support the video tag. 
</video> 


Internet Explorer 


Internet Explorer 8 不 支持 video 元 素 。 在 IE 9 中 ， 将 提供 对 使 用 MPEG4 的 
video 元 素 的 支持 。 


<video> 标签 的 属性 


属性 值 描述 
autoplay autoplay ”如 果 出 现 该 属性 ， 则 视频 在 就 绪 后 马上 播放 。 
controls controls ”如果 出 现 该 属性 ， 则 向 用 户 显示 控件 ， 比 如 播放 按钮 。 
height pixels 设置 视频 播放 器 的 高 度 。 


loop loop SHARE: 则 当 媒 介 文 件 完成 播放 后 再 次 开始 揪 


如 果 出 现 该 属性 ， 则 视频 在 页 面 加载 时 进行 加 载 ， 并 预 
各 播放 。 如 果 使 用 "autoplay"， 则 忽略 该 属性 。 

src url 要 播放 的 视频 的 URL. 

width pixels 设置 视频 播放 器 的 宽度 。 


preload preload 


相关 页 面 


参考 手册 : HTML 5 «video» 标签 


HTML 5 Video + DOM 


HTML5 «video»? - 使 用 DOM 进行 控制 


HTML5 «video»? 元 素 同 样 拥有 方法 、 属 性 和 事件 。 

其 中 的 方法 用 于 播放 、 痢 停 以 及 加 载 等 。 其 中 的 属性 (比如 时 长 、 音 量 等 ) 可 以 被 
读 取 或 设置 。 其 中 的 DOM 事件 能 够 通知 您 ， 比 方 说 ，<video> 元 素 开 始 播放 、 已 
暂停 ， 已 停止 ， 等 等 。 

下 例 中 简单 的 方法 ， 向 我 们 演示 了 如 何 使 用 «video» 元 素 ， 读 取 并 设置 属性 ， 以 及 
如 何 调用 方法 。 

实例 


为 视频 创建 简单 的 播放 /暂停 以 及 调整 尺寸 控件 : 


<!DOCTYPE html» 
<html> 
<body> 


<div style="text-align:center;"> 

«button onclick="playPause( )">#6iK/ %4 {E</button> 

«button onclick="makeBig()">X</button> 

«button onclick="makeNormal()">#</button> 

«button onclick-"makeSmall()"»/«/button» 

«br /» 

«video id-'"video1" width="420" style="margin-top:15px;"> 
«source src="/example/htm15/mov_bbb.mp4" type="video/mp4" /> 
«source src="/example/htm15/mov_bbb.ogg" type-'video/ogg" /> 
Your browser does not support HTML5 video. 

«/video» 

«/div» 


«script type="text/javascript"> 
var myVideo-document.getElementById("video1"); 


function playPause() 


if (myVideo.paused) 
myVideo.play(); 


else 
myVideo.pause(); 
} 
function makeBig() 
{ 
myVideo.width=560; 
} 
function makeSmall() 
{ 
myVideo.width=320; 
} 


function makeNormal() 


myVideo.width=420; 
j 


«/script» 


«/body» 
«/html» 


上 面 的 例子 调用 了 两 个 方法 : play() 和 pause()。 它 同时 使 用 了 两 个 属性 : paused 
和 width。 


HTML5 <video> - 方法 、 属 性 以 及 事件 
下 面 列 出 了 大 多 数 浏 览 器 支持 的 视频 方法 、 属 性 和 事件 : 


方法 属性 事件 
play() currentSrc play 
pause() currentTime pause 
load() videoWidth progress 
canPlayType videoHeight error 
duration timeupdate 
ended ended 
error abort 
paused empty 
muted emptied 
seeking waiting 
volume loadedmetadata 
height 
width 


注释 : 在 所 有 属性 中 ， 只 有 videoWidth 和 videoHeight 属性 是 立即 可 用 的 。 在 视频 
的 元 数据 已 加 载 后 ， 其 他 属性 才 可 用 。 


HTML 5 音频 


HTML5 提供 了 播放 音频 的 标准 。 


Web 上 的 音频 


直到 现在 ， 仍 然 不 存在 一 项 旨 在 网 页 上 播放 音频 的 标准 。 


今天 ， 大 多 数 音频 是 通过 插件 (比如 Flash) 来 播放 的 。 然 而 ， 并 非 所 有 浏览 器 都 
拥有 同样 的 插件 。 


HTML5 规定 了 一 种 通过 audio 元 素来 包含 音频 的 标准 方法 。 
audio 元 素 能 够 播放 声音 文件 或 者 音频 流 。 

音频 格式 

当前 ，audio 元 素 支 持 三 种 音频 格式 : 


IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 
Ogg Vorbis V V 
MP3 V y 
Wav v y 


如 何 工 作 
如 需 在 HTML5 中 播放 音频 ， 您 所 有 需要 的 是 : 


<audio src="song.ogg" controls="controls"> 
</audio> 


control BIERA IIE, FSAMS See. 
«audio» 5 </audio> 之 间 插 入 的 内 容 是 供 不 支 持 audio 元 素 的 浏览 器 显示 的 : 


实例 


<audio src="song.ogg" controls="controls"> 
Your browser does not support the audio tag. 
</audio> 


上 面 的 例子 使 用 一 个 Ogg 文件 ， 适 用 于 Firefox、Opera 以 及 Chrome 浏览 器 。 

要 确保 适用 于 Safari 浏览 器 ， 音 频 文件 必须 是 MP3 或 Wav 类 型 。 

audio 元 素 人 允许 多 个 source 元 素 。 source 元 素 可 以 链接 不 同 的 音频 文件 。 浏 览 器 
将 使 用 第 一 个 可 识别 的 格式 : 

实例 

头 


<audio controls="controls"> 
«source src="song.ogg" type="audio/ogg"> 
«source src="song.mp3" type="audio/mpeg"> 
Your browser does not support the audio tag. 
</audio> 


Internet Explorer 


Internet Explorer 8 不 支持 audio 元 素 。 在 IE 9 中 ， 将 提供 对 audio 元 素 的 支持 。 
<audio> 标签 的 属性 


属性 值 描述 
autoplay autoplay ”如 果 出 现 该 属性 ， 则 音频 在 就 绪 后 马上 播放 。 
controls controls ”如 果 出 现 该 属性 ， 则 向 用 户 显 示 控 件 ， 上 比如 播放 按钮 。 
loop loop 如 果 出 现 该 属性 ， 则 每 当 音频 结束 时 重新 开始 播放 。 


如 果 出 现 该 属性 ， 则 音频 在 页 面 加 载 时 进行 加 载 ， 并 预 
各 播放 。 如 果 使 用 "autoplay"， 则 忽略 该 属性 。 


src url 要 播放 的 音频 的 URL. 


preload preload 


相关 页 面 


参考 手册 : HTML 5 <audio> 标签 


HTML 5 拖 放 
拖 放 (Drag 和 drop) 是 HTML5 标准 的 组 成 部 分 。 
拖 放 


拖 放 是 一 种 常见 的 特性 ， 即 抓 取 对 象 以 后 拖 到 另 一 个 位 置 。 
在 HTML5 中 ， 拖 放 是 标准 的 一 部 分 ， 任 何 元 素 都 能 够 拖 放 。 


浏览 器 支持 
Internet Explorer 9、Firefox、Opera 12、Chrome 以 及 Safari 5 支持 拖 放 。 
注释 : 在 Safari 5.1.2 中 不 支持 拖 放 。 


HTML5 拖 放 实例 
下 面 的 例子 是 一 个 简单 的 拖 放 实例 : 


实例 


<!DOCTYPE HTML> 

<html> 

<head> 

<script type="text/javascript"> 
function allowDrop(ev) 


{ 


ev.preventDefault(); 


} 


function drag(ev) 


ev.dataTransfer.setData("Text",ev.target.id); 


j 


function drop(ev) 


{ 


ev.preventDefault(); 
var data=ev.dataTransfer.getData("Text"); 
ev.target.appendChild(document.getElementById(data)); 


j 

«/script» 

«/head» 

«body» 

«div id="divi" ondrop="drop(event)" 
ondragover="allowDrop(event)"></div> 

«img id="dragi" src="img_ logo.gif" draggable="true" 
ondragstart="drag(event)" width="336" height="69" /> 


</body> 
</html> 


它 看 上 去 也 许 有 些 复杂 ， 不 过 我 们 可 以 分 别 研究 拖 放 事 件 的 不 同 部 分 。 


设置 元 素 为 可 拖 放 
首先 ， 为 了 使 元 素 可 拖 动 ， 把 draggable 属性 设置 为 true : 


<img draggable="true" /> 


拖 动 什么 - ondragstart 和 setData() 


然后 ， 规 定 当 元 素 被 拖 动 时 ， 会 发 生 什么 。 


在 上 面 的 例子 中 ，ondragstart 属性 调用 了 一 个 函数 ，drag(event)， 它 规定 了 被 拖 
动 的 数据 。 


dataTransfer.setData() 方法 设置 被 拖 数据 的 数据 类 型 和 值 : 


function drag(ev) 


ev.dataTransfer.setData("Text",ev.target.id); 


j 
在 这 个 例子 中 ， 数 据 类 型 是 "Text"， 值 是 可 拖 动 元 素 的 id ("drag1")。 


WEHI X - ondragover 


ondragover 事件 规定 在 何 外 放置 被 拖 动 的 数据 。 


默认 地 ， 无 法 将 数据 /元 素 放 置 到 其 他 元 素 中 。 如 果 需 要 设置 允许 放置 ， 我 们 必须 阻 
止 对 元 素 的 默认 义理 方式 。 


这 要 通过 调用 ondragover 事件 的 event.preventDefault() 方法 : 


event.preventDefault() 


进行 放置 - ondrop 


当 放 置 被 拖 数据 时 ， 会 发 生 drop 事件 。 
在 上 面 的 例子 中 ，ondrop 属性 调用 了 一 个 隙 数 ，drop(event) : 


function drop(ev) 


{ 

ev.preventDefault(); 

var data=ev.dataTransfer.getData("Text"); 
ev.target.appendChild(document.getElementById(data)); 


j 


代码 解释 : 


e 调用 preventDefault() 来 避免 浏览 器 对 数据 的 默认 义理 (drop 事件 的 默认 行为 
是 以 链接 形式 打开 ) 

e 通过 dataTransfer.getData("Text") 方法 获得 被 拖 的 数据 。 该 方法 将 返回 在 
setData() 方法 中 设置 为 相同 类 型 的 任何 数据 。 

e 被 拖 数 据 是 被 拖 元 素 的 id ("drag1") 

把 被 拖 元 素 追 加 到 放置 元 素 (目标 元 素 ) 中 


更 多 实例 


W3School Html & Css 教程 


来 回 拖 放 图 片 


HTML 5 拖 放 171 


HTML 5 Canvas 


canvas 元 素 用 于 在 网 页 上 绘制 图 形 。 


什么 是 Canvas ? 

HTML5 的 canvas 元 素 使 用 JavaScript 在 网 页 上 绘制 图 像 。 
画布 是 一 个 矩形 区 域 ， 您 可 以 控制 其 每 一 像素 。 

canvas 拥有 多 种 绘制 路 径 、 和 矩形 、 圆 形 、 字 符 以 及 添加 图 像 的 方法 。 
创建 Canvas 元 素 


向 HTML5 页 面 添 加 canvas 元 素 。 
规定 元 素 的 id. 宽度 和 高 度 : 


<canvas id="myCanvas" width="200" height="100"></canvas> 


通过 JavaScript 来 绘制 


canvas 元 素 本 身 是 没有 绘图 能 力 的 。 所 有 的 绘制 工作 必须 在 JavaScript 内 部 完 
成 : 


<script type="text/javascript"> 

var c-document.getElementById("myCanvas"); 
var cxt=c.getContext("2d"); 
cxt.fillStyle-"4ZFF0000"; 
cxt.fillRect(0,0,150,75); 

«/script» 


JavaScript 使 用 id 来 寻找 canvas 元 素 : 


var c-document.getElementById("myCanvas"); 


然后 ， 创 建 context 对 象 : 


var cxt=c.getContext("2d"); 


getContext("2d") 对 象 是 内 建 的 HTML5 对 象 ， 拥 有 多 种 绘制 路 径 、 和 矩形 、 圆 形 、 
字符 以 及 添加 图 像 的 方法 。 


下 面 的 两 行 代码 绘制 一 个 红色 的 矩形 : 


cxt.fillStyle="#FFO000"; 
cxt.fillRect(0,0,150, 75); 


fillStyle 方法 将 其 染 成 红色 ， 人 illRect 方法 规定 了 形状 、 位 置 和 尺寸 。 


理解 坐标 

上 面 的 fillRect 方法 拥有 参数 (0,0,150,75)。 

意思 是 : 在 画布 上 绘制 150x75 的 矩形 ， 从 左上 角 开 始 (0,0)。 
如 下 图 所 示 ， 画 布 的 X 和 YY 坐标 用 于 在 画布 上 对 绘画 进行 定位 。 


x 


实例 : 3E SUE BPE LAA BI te 
更 多 Canvas 实例 
下 面 的 在 canvas 元 素 上 进行 绘画 的 更 多 实例 : 


实例 - 线条 


通过 指定 从 何 处 开始 ， 在 何 处 结束 ， 来 绘制 一 条 线 : 


ion 


JavaScript 代码 : 


<script type="text/javascript"> 


var c-document.getElementById("myCanvas"); 
var cxt=c.getContext("2d"); 
cxt.moveTo(10,10); 

cxt.lineTo(150,50); 

cxt.lineTo(10,50); 

cxt.stroke(); 


«/script» 


canvas 元 素 : 


«canvas id="myCanvas" width="200" height="100" style-"border:ipx st 
Your browser does not support the canvas element. 
«/canvas» 


ml 一 —g 


例 - 圆 形 
过 规定 尺寸 、 颜 色 和 位 置 ， 来 绘制 一 个 圆 : 





将 


Bá 


JavaScript 代码 : 


«script type="text/javascript"> 


var c-document.getElementById("myCanvas"); 
var cxt=c.getContext("2d"); 
cxt.fillStyle-z"4ZFF0000"; 

cxt.beginPath(); 
cxt.arc(70,18,15,0,Math.PI*2,true); 
cxt.closePath(); 

cxt Tali); 


«/script» 


canvas 元 素 : 


«canvas id="myCanvas" width="200" height="100" style="border:1px sc 
Your browser does not support the canvas element. 
</canvas> 


‘ = 








实例 - 渐变 
使 用 您 指定 的 颜色 来 绘制 渐变 背景 : 


JavaScript 代码 : 


<script type="text/javascript"> 


var c-document.getElementById("myCanvas"); 
var cxt=c.getContext("2d"); 

var grd=cxt.createLinearGradient(0,0,175,50); 
grd.addColorStop(0, "#FF0000"); 
grd.addColorStop(1, 'Z00FF00"); 
cxt.fillStyle=grd; 

cxt.fillRect(0,0,175,50); 


</script> 


canvas 元 素 : 


«canvas id="myCanvas" width="200" height="100" style-"border:ipx st 
Your browser does not support the canvas element. 
</canvas> 
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实例 - 图 像 
把 一 幅 图 像 放置 到 画布 上 : 


JavaScript 代码 : 


<script type="text/javascript"> 


var 
var 
var 


img. 
cxt. 


c-document.getElementById("myCanvas"); 


cxtzc.getContext ("2d"); 
img-new Image() 
src="flower.png" 
drawImage(img,0,0); 


</script> 


canvas 元 素 : 


<canvas id="myCanvas" width="200" 
Your browser does not support the canvas element. 
</canvas> 


四 一 = LL meray 


相关 页 面 


参考 手册 : HTML 5 <canvas> 标签 
参考 手册 : HTML DOM Canvas 对 象 


height="100" style="border:1px sc 





HTML5 Axx SVG 


HTML5 支持 内 联 SVG, 


什么 是 SVG ? 
e SVG 指 可 伸缩 矢量 图 形 (Scalable Vector Graphics) 
e SVG 用 于 定义 用 于 网 络 的 基于 矢量 的 图 形 
e SVG 使 用 XML 格式 定义 图 形 
e SVG 图 像 在 放大 或 改变 尺寸 的 情况 下 其 图 形 质量 不 会 有 损失 
e SVG 是 万 维 网 联盟 的 标准 
SVG 的 优势 


与 其 他 图 像 格式 相 比 (比如 JPEG 和 GIF) ， 使 用 SVG 的 优势 在 于 : 


e SVG 图 像 可 通过 文本 编辑 器 来 创建 和 修改 

e SVG 图 像 可 被 搜索 、 索 引 、 脚 本 化 或 压缩 

e SVG 是 可 伸缩 的 

e SVG 图 像 可 在 任何 的 分 辩 率 下 被 高 质量 地 打印 
e SVG 可 在 图 像 质量 不 下 降 的 情况 下 被 放大 


浏览 器 支持 

Internet Explorer 9、Firefox、Opera、Chrome 以 及 Safari 支持 内 联 SVG。 
把 SVG iB FEBR. HTML 页 面 

在 HTML5 中 ， 您 能 够 将 SVG 元 素 直 接 伐 入 HTML 页 面 中 : 


实例 


<!DOCTYPE html» 

<html> 

<body> 

«svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190' 
<polygon points="100,10 40,180 190,60 10,60 160,180" 
style="fill:lime;stroke: purple; stroke-width:5;fill-rule:evenodd;' 

</svg> 

</body> 

</html> 











0 需 学 习 更 多 有 关 SVG 的 知识 ， 请 阅读 我 们 的 SVG 教程 。 
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HTML 5 Canvas vs. SVG 


Canvas 和 SVG 都 允许 您 在 浏览 器 中 创建 图 形 ， 但 是 它们 在 根本 上 是 不 同 的 。 


SVG 


SVG 是 一 种 使 用 XML 描述 2D 图 形 的 语言 。 


SVG 基于 XML， 这 意味 着 SVG DOM 中 的 每 个 元 素 都 是 可 用 的 。 您 可 以 为 某 个 元 
素 附 加 JavaScript 事件 处 理 器 。 


在 SVG 中 ， 每 个 被 绘制 的 图 形 均 被 视 为 对 象 。 如 果 SVG 对 象 的 属性 发 生变 化 ， 那 
么 浏览 器 能 够 自动 重 现 图 形 。 


Canvas 


Canvas 通过 JavaScript 来 绘制 2D 图 形 。 
Canvas 是 逐 像素 进行 泻 染 的 。 


在 canvas 中 ， 一 旦 图 形 被 绘制 完成 ， 它 就 不 会 继续 得 到 浏览 器 的 关注 。 如 果 其 位 
置 发 生变 化 ， 那 么 整个 场景 也 需要 重新 绘制 ， 包 括 任 何 或 许 已 被 图 形 履 盖 的 对 象 。 


Canvas 与 SVG 的 比较 


下 表 列 出 了 canvas 与 SVG 之 间 的 一 些 不 同 之 处 。 


Canvas 


不 支持 事件 义理 器 

弱 的 文本 泻 染 能 力 

能 够 以 .png 或 jpg 格式 保存 结果 图 像 

最 适合 图 像 密集 型 的 游戏 ， 其 中 的 许多 对 象 会 被 频繁 重 绘 


SVG 
。 不 依赖 分 辩 率 
。 文 持 事 件 处 理 器 
e 最 适合 带 有 大 型 泻 染 区 域 的 应用 程序 〈 比 如 谷歌 地 图 ) 
e 复杂 度 高 会 减 慢 泻 染 速 度 (任何 过 度 使 用 DOM 的 应 用 都 不 快 ) 
。 不 适合 游戏 应 用 


HTML5 地 理 定 位 


HTML5 Geolocation (地 理 定位 ) 用 于 定位 用 户 的 位 置 。 
亲自 试 一 试 : 在 谷歌 地 图 上 显示 您 的 位 置 


<!DOCTYPE html» 
«html» 
«body» 
«p id="demo"> 点 击 这 个 按钮 ， 获 得 您 的 位 置 : </p> 
«button onclick="getLocation()"> 试 一 下 </button> 
<div id="mapholder"></div> 
«script src="http://maps.google.com/maps/api/js?sensor=false"></sci 
<script> 
var x=document.getElementById("demo"); 
function getLocation() 
{ 
if (navigator.geolocation) 
{ 
navigator .geolocation.getCurrentPosition(showPosition, showErrot 
} 


else{x.innerHTML="Geolocation is not supported by this browser." 


} 


function showPosition(position) 
{ 
lat=position.coords. latitude; 
lon=position.coords. longitude; 
latlon=new google.maps.LatLng(lat, lon) 
mapholder-zdocument.getElementById( 'mapholder') 
mapholder.style.height-'250px'; 
mapholder.style.width-'500px'; 


var myOptions-( 

center:latlon, zoom:14, 

mapTypeId:google.maps.MapTypeld.ROADMAP, 

mapTypeControl:false, 
navigationControloptions:{style:google.maps.NavigationControlSty- 
}; 

var map=new google.maps.Map(document.getElementById("mapholder"), 
var marker=new google.maps.Marker({position:latlon,map:map, title 


} 


function showError(error) 


( 


switch(error.code) 


{ 
case error.PERMISSION DENIED: 


x.innerHTML-"User denied the request for Geolocation." 


break; 
case error.POSITION UNAVAILABLE: 
x.innerHTML-"Location information is unavailable." 
break; 
case error.TIMEOUT: 
x.innerHTML-"The request to get user location timed out." 
break; 
case error.UNKNOWN ERROR: 
x.innerHTML-"An unknown error occurred." 
break; 
} 
} 
</script> 
</body> 
</html> 
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定位 用 户 的 位 置 

HTML5 Geolocation API 用 于 获得 用 户 的 地 理 位 置 。 

鉴于 该 特性 可 能 侵犯 用 户 的 隐私 ， 除 非 用 户 同意 ， 否 则 用 户 位 置信 息 是 不 可 用 的 。 
浏览 器 支持 

Internet Explorer 9, Firefox, Chrome, Safari 以 及 Opera 支持 地 理 定位 。 

注释 : 对 于 拥有 GPS 的 设备 ， 比 如 iPhone， 地理 定 位 更 加 精确 。 





HTML5 - 使 用 地 理 定 位 


请 使 用 getCurrentPosition() 方法 来 获得 用 户 的 位 置 。 
下 例 是 一 个 简单 的 地 理 定位 实例 ， 可 返回 用 户 位 置 的 经 度 和 纬度 。 


实例 


<script> 
var x-document.getElementById("demo"); 
function getLocation() 
if (navigator.geolocation) 
navigator.geolocation.getCurrentPosition(showPosition); 
else{x.innerHTML="Geolocation is not supported by this browser." 
function showPosition(position) 
{ 
x.innerHTML-"Latitude: " + position.coords.latitude + 
"<br />Longitude: " + position.coords. longitude; 


</script> 





e 检测 是 否 支持 地 理 定 位 

° 如 果 支 持 ， 则 运行 getCurrentPosition() 方法 。 如 果 不 支 持 ， 则 向 用 户 显示 一 
段 消 息 。 

e 如 果 getCurrentPosition() 运 行 成 功 ， 则 向 参数 showPosition 中 规定 的 函数 返 
一 个 coordinates 对 象 

e showPosition() 函数 获得 并 显示 经 度 和 纬度 


上 面 的 例子 是 一 个 非常 基础 的 地 理 定位 脚本 ， 不 含 错误 处 理 。 


处 理 错误 和 拒绝 


getCurrentPosition() 方法 的 第 二 个 参数 用 于 处 理 错 误 。 定 当 获取 用 户 位 置 失败 
Brie {TAR : 


实例 


function showError(error) 


{ 
switch(error.code) 
{ 
case error.PERMISSION DENIED: 
x.innerHTML-"User denied the request for Geolocation." 
break; 
case error.POSITION UNAVAILABLE: 
x.innerHTML-"Location information is unavailable." 
break; 
case error.TIMEOUT: 
x.innerHTML-"The request to get user location timed out." 
break; 
case error.UNKNOWN ERROR: 
x.innerHTML-"An unknown error occurred." 
break; 
} 
} 
错误 代码 : 


e Permission denied - 用 户 不 允许 地 理 定位 
e Position unavailable - 无 法 获取 当前 位 置 
e Timeout - 操作 超时 


在 地 图 中 显示 结果 


如 需 在 地 图 中 显示 结果 ， 您 需要 访问 可 使 用 经 纬度 的 地 图 服务 ， 比 如 谷歌 地 图 或 百 
度 地 图 : 


实例 


function showPosition(position) 


{ 


var latlon=position.coords.latitude+","+position.coords.longitude; 


var img_url="http://maps.googleapis.com/maps/api/staticmap?center=' 
+latlon+"&zoom=14&size=400x300&sensor=false"; 


document .getElementById("mapholder").innerHTML="<img src='"+img_ur: 


} 
BE 
在 上 例 中 ， 我 们 使 用 返回 的 经 纬度 数据 在 谷歌 地 图 中 显示 位 置 《使 用 静态 图 像 ) 。 
谷歌 地 图 脚本 
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图 。 


给 定位 置 的 信息 
本 页 演示 的 是 如 何在 地 图 上 显示 用 户 的 位 置 。 不 过 ， 地 理 定位 对 于 给 定位 置 的 信息 
PARA. 


。 更 新 本 地 信息 
。 显示 用 户 周 围 的 兴趣 点 
e 交互 式 车 载 导 航 系统 (GPS) 


getCurrentPosition() 方法 - 返回 数据 


若 成 功 ， 则 getCurrentPosition() 方法 返回 对 象 。 始 终 会 返回 latitude, longitude 以 
及 accuracy 属性。 如 果 可 用 ， 则 会 返回 其 他 下 面 的 属性 。 


属性 描述 
coords.latitude 十 进 制 数 的 纬度 
coords.longitude 十 进 制 数 的 经 度 
coords.accuracy 位 置 精度 
coords.altitude 海拔 ， 海 平面 以 上 以 米 计 
coords.altitudeAccuracy 位 置 的 海拔 精度 
coords.heading 方向 ， 从 正 北 开始 以 度 计 
coords.speed 速度 ， 以 米 /每 秒 计 
timestamp 响应 的 日 期 /时 间 


Geolocation 对 象 - 其 他 有 趣 的 方法 


watchPosition() - 返回 用 户 的 当前 位 置 ， 并 继续 返回 用 户 移动 时 的 更 新 位 置 (就 像 
^h &.ERy GPS). 


clearWatch() - 停止 watchPosition() 方法 
下 面 的 例子 展示 watchPosition() 方法 。 您 需要 一 台 精 确 的 GPS 设备 来 测试 该 例 
(比如 iPhone) : 


实例 


<script> 
var x-document.getElementById("demo"); 
function getLocation() 


{ 
if (navigator .geolocation) 
{ 
navigator.geolocation.watchPosition(showPosition); 
} 
else{x.innerHTML="Geolocation is not supported by this browser." 
} 
function showPosition(position) 
x.innerHTML-"Latitude: " + position.coords.latitude + 
"<br />Longitude: " + position.coords.longitude; 
} 
</script> 
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HTML 5 Web 存储 


在 客户 端 存 储 数据 
HTML5 提供 了 两 种 在 客户 端 存储 数据 的 新 方法 : 


e localStorage - 没有 时 间 限 制 的 数据 存储 
e sessionStorage - 针对 一 个 session 的 数据 存储 


之 前 ， 这 些 都 是 由 cookie 完成 的 。 但 是 cookie 不 适合 大 量 数据 的 存储 ， 因 为 它们 
由 每 个 对 服务 器 的 请 求 来 传递 ， 这 使 得 cookie 速度 很 慢 而 且 效率 也 不 高 。 


在 HTML5 中 ， 数 据 不 是 由 每 个 服务 器 请 求 传递 的 ， 而 是 只 有 在 请 求 时 使 用 数据 。 
它 使 在 不 影响 网 站 性 能 的 情况 下 存储 大 量 数据 成 为 可 能 。 


对 于 不 同 的 网 站 ， 数 据 存储 于 不 同 的 区 域 ， 并 且 一 个 网 站 只 能 访问 其 自身 的 数据 。 
HTML5 使 用 JavaScript 来 存储 和 访问 数据 。 


localStorage 方法 


localStorage 方法 存储 的 数据 没有 时 间 限 制 。 第 二 天 、 第 二 周 或 下 一 年 之 后 ， 数 据 
依然 可 用 。 


如 何 创 建 和 访问 localStorage : 
实例 


<script type="text/javascript"> 
localStorage. lastname="Smith"; 
document .write(localStorage. lastname) ; 
</script> 


下 面 的 例子 对 用 户 访问 页 面 的 次 数 进行 计数 : 


实例 


<script type="text/javascript"> 
if (localStorage.pagecount ) 
{ 
localStorage.pagecount=Number(localStorage.pagecount) +1; 
} 
else 
{ 
localStorage.pagecount=1; 
} 
document.write("Visits "+ localStorage.pagecount + " time(s)."); 
</script> 


sessionStorage 方法 


sessionStorage 方法 针对 一 个 session 进行 数据 存储 。 当 用 户 关闭 浏览 器 窗口 后 ， 
数据 会 被 删除 。 


如 何 创建 并 访问 一 个 sessionStorage : 


实例 


<script type="text/javascript"> 
sessionStorage.lastname="Smith"; 
document .write(sessionStorage. lastname); 
</script> 


下 面 的 例子 对 用 户 在 当前 session 中 访问 页 面 的 次 数 进 行 计 数 : 


实例 


<script type="text/javascript"> 
if (sessionStorage.pagecount ) 
{ 
sessionStorage.pagecount=Number (sessionStorage.pagecount) +1; 
} 
else 
{ 
sessionStorage.pagecount-1; 
} 
document.write("Visits "+sessionStorage.pagecount+" time(s) this st 
«/script» 











HTML 5 应 用 程序 缓存 


使 用 HTML5， 通 过 创建 cache manifest 文件 ， 可 以 轻松 地 创建 web 应 用 的 离线 
版 本 。 


什么 是 应 用 程序 缓存 (Application Cache) ? 


HTML5 引入 了 应 用 程序 缓存 ， 这 意味 着 web 应 用 可 进行 缓存 ， 并 可 在 没有 因特网 
连接 时 进行 访问 。 

应 用 程序 缓存 为 应 用 带 来 三 个 优势 : 

e 离线 浏览 - 用 户 可 在 应 用 离线 时 使 用 它们 

e 速度 - 已 缓存 资源 加 载 得 更 快 

减少 服务 器 负载 - 浏览 器 将 只 从 服务 器 下 载 更 新 过 或 更 改过 的 资源 。 


浏览 器 文 持 


所 有 主流 浏览 器 均 支 持 应 用 程序 缓存 ， 除 了 Internet Explorer. 


HTML5 Cache Manifest 实例 


下 面 的 例子 展示 了 带 有 cache manifest 的 HTML 文档 〈 供 离线 浏览 ) 
实例 


<!DOCTYPE HTML> 

<html manifest="demo.appcache"> 
<body> 

The content of the document...... 
</body> 


</html> 


Cache Manifest 基础 


如 需 启 用 应 用 程序 缓存 ， 请 在 文档 的 «html» 标签 中 包含 manifest 属性 : 


<!DOCTYPE HTML> 
<html manifest="demo.appcache"> 


Spee 
每 个 指定 了 manifest 的 页 面 在 用 户 对 其 访问 时 都 会 被 缓存 。 如 果 未 指定 manifest 
属性 ， 则 页 面 不 会 被 缓存 (除非 在 manifest 文件 中 直接 指定 了 该 页 面 ) 。 


manifest 文件 的 建议 的 文件 扩展 名 是 : ".appcache"。 


请 注意 ，manifest 文件 需要 配置 正确 的 MIME-type， 即 "text/cache-manifest"。 必 
须 在 web 服务 器 上 进行 配置 。 


Manifest 文件 
manifest 文件 是 简单 的 文本 文件 ， 它 告知 浏览 器 被 缓存 的 内 容 (以 及 不 缓存 的 内 


sy 


容 ) 

manifest 文件 可 分 为 三 个 部 分 : 

e CACHE MANIFEST - 在 此 标题 下 列 出 的 文件 将 在 首次 下 载 后 进行 缓存 

e NETWORK - 在 此 标题 下 列 出 的 文件 需要 和 与 服务 器 的 连接 ， 且 不 会 被 缓存 


e FALLBACK - 在 此 标题 下 列 出 的 文件 规定 当 页 面 无 法 访问 时 的 回 退 页 面 (比如 
404 页 面 ) 


CACHE MANIFEST 


第 一 行 ，CACHE MANIFEST， 是 必需 的 : 


CACHE MANIFEST 
/theme.css 
/logo.gif 
/main.js 


上 面 的 manifest 文件 列 出 了 三 个 资源 : 一 个 CSS 文件 ， 一 个 GIF 图 像 ， 以 及 一 个 
JavaScript 文件 。 当 manifest 文件 加 载 后 ， 浏 览 器 会 从 网 站 的 根 目 录 下 载 这 三 个 文 
件 。 然 后 ， 无 论 用 户 何 时 与 因特网 断 开 连接 ， 这 些 资源 依然 是 可 用 的 。 


NETWORK 


下 面 的 NETWORK 小 节 规定 文件 "login.asp" 永远 不 会 被 缓存 ， 且 离线 时 是 不 可 用 
的 : 


NETWORK: 
login.asp 


可 以 使 用 星 号 来 指示 所 有 其 他 资源 /文件 都 需要 因特网 连接 : 


NETWORK : 
* 


FALLBACK 


下 面 的 FALLBACK 小 节 规 定 如 果 无 法 建立 因特网 连接 ， 则 用 "offline.html" Bt 
/html5/ 目录 中 的 所 有 文件 : 


FALLBACK: 
/htm15/ /404.htm1 


注释 : 第 一 个 URI 是 资源 ， 第 二 个 是 替补 。 


更 新 缓存 


一 县 应 用 被 缓存 ， 它 就 会 保持 缓存 站 到 发 生 下 列 情况 : 


e 用 户 清空 浏览 器 缓存 
e manifest 文件 被 修改 (参阅 下 面 的 提示 ) 
e 由 程序 来 更 新 应 用 缓存 


实例 - 完整 的 Manifest 文件 


CACHE MANIFEST 

# 2012-02-21 v1.0.0 
/theme.css 
/logo.gif 

/main.js 


NETWORK: 
login.asp 


FALLBACK: 
/html15/ /404.htm1 


重要 的 提示 : 以 #" 开头 的 是 注释 行 ， 但 也 可 满足 其 他 用 途 。 应 用 的 缓存 会 在 其 
manifest 文件 更 改 时 被 更 新 。 如 果 您 编辑 了 一 幅 图 片 ， 或 者 修改 了 一 个 JavaScript 
函数 ， 这 些 改 变 都 不 会 被 重新 缓存 。 更 新 注释 行 中 的 日 期 和 版 本 号 是 一 种 使 浏览 器 


重新 缓存 文件 的 办 法 。 


天 于 应 用 程序 缓存 的 注释 


请 留心 缓存 的 内 容 。 


一 旦 文件 被 缓存 ， 则 浏览 器 会 继续 展示 已 缓存 的 版 本 ， 即 使 您 修改 了 服务 器 上 的 文 
件 。 为 了 确保 浏览 器 更 新 缓存 ， 您 需要 更 新 manifest 文件 。 

注释 : 浏览 器 对 缓存 数据 的 容量 限制 可 能 不 太一 样 〈 某 些 浏览 器 设置 的 限制 是 每 个 
站 点 5MB) 。 


HTML 5 Web Workers 


web worker 是 运行 在 后 台 的 JavaScript， 不 会 影响 页 面 的 性 能 。 


什么 是 Web Worker ? 


当 在 HTML 页 面 中 执行 脚本 时 ， 页 面 的 状态 是 不 可 响应 的 ， 直 到 脚本 已 完成 。 
web worker 是 运行 在 后 台 的 JavaScript， 独 立 于 其 他 脚本 ， 不 会 影响 页 面 的 性 能 。 
您 可 以 继续 做 任何 愿意 做 的 事情 : 点 击 、 选 取 内 容 等 等 ， 而 此 时 web worker 在 后 
台 运 行 。 


浏览 器 支持 


所 有 主流 浏览 器 均 支 持 web worker， 除 了 Internet Explorer。 


HTML5 Web Workers 实例 


下 面 的 例子 创建 了 一 个 简单 的 web worker， 在 后 台 计 数 : 
计数 : 


<button onclick="startWorker()" style="font:12px Verdana, Arial, Helvetica, sans- 
serif;"> à a Worker</button> «button onclick="stopWorker()" style="font:12px 
Verdana, Arial, Helvetica, sans-serif;">421E Worker</button> 


4 ij Web Worker 支持 
在 创建 web worker 之 前 ， 请 检测 用 户 的 浏览 器 是 否 支持 它 : 


if(typeof(Worker)!-z"undefined") 
{ 


// Yes! Web worker support! 
// Some code..... 


} 


else 


{ 
// Sorry! No Web Worker support.. 


} 


创建 web worker 文件 


现在 ， 让 我 们 在 一 个 外 部 JavaScript 中 创建 我 们 的 web worker. 
在 这 里 ， 我 们 创建 了 计数 脚本 。 该 脚本 存储 于 "demo workers.js" 文件 中 : 


var i=0; 

function timedCount() 

E 

1=1+1; 

postMessage(i); 
setTimeout("timedCount()",500); 
} 


timedCount(); 


以 上 代码 中 重要 的 部 分 是 postMessage() 方法 - 它 用 于 向 HTML. 页 面 传 回 一 段 消 
E 


JONO 


注释 : web worker 通常 不 用 于 如 此 简单 的 脚本 ， 而 是 用 于 更 耗费 CPU 资源 的 任 
务 。 


创建 Web Worker 对 象 


我 们 已 经 有 了 web worker 文件 ， 现 在 我 们 需要 从 HTML 页 面 调用 它 。 


下 面 的 代码 检测 是 否 存 在 worker， 如 果 不 存 在 ，- 它 会 创建 一 个 新 的 web worker 
对 象 ， 然 后 运行 "demo_workers.js" 中 的 代码 : 


if (typeof (w)=="undefined" ) 


w-new Worker("demo workers.js"); 


然后 我 们 就 可 以 从 web worker 发 生 和 接收 消息 了 。 


向 web worker 添加 一 个 "onmessage" 事件 监听 器 : 


w.onmessage=function(event ) { 
document .getElementById("result").innerHTML=event.data; 


, 


34 web worker 传递 消息 时 ， 会 执行 事件 监听 器 中 的 代码 。event.data 中 存 有 来 自 
event.data 的 数据 。 


终止 Web Worker 


当 我 们 创建 web ODE 
直到 其 被 终止 为 止 。 rker 对 象 后 ， 它 会 继续 监听 消息 〈 即 使 在 外 部 脚本 完成 之 后 ) 
如 需 终 止 web worker， 并 释放 浏览 器 /计算 机 资源 ， 请 使 用 terminate() 方法 : 


w.terminate(); 


完整 的 Web Worker 实例 代码 


我 们 已 经 看 到 了 js 文件 中 的 Worker 代码 。 下 面 是 HTML 页 面 的 代码 : 


实例 


<!DOCTYPE html» 
<html> 
<body> 


<p>Count numbers: <output id="result"></output></p> 
«button onclick-"startWorker()"»Start Worker</button> 
«button onclick="stopWorker()">Stop Worker</button> 
<br /><br /> 


<script> 
var w; 


function startWorker() 
{ 
if(typeof(Worker)!-z"undefined") 
if (typeof (w)=="undefined" ) 
{ 


w=new Worker("demo workers.js"); 


} 


w.onmessage = function (event) { 
document .getElementById("result").innerHTML=event.data; 


}; 
} 


else 


{ 


document .getElementById("result").innerHTML="Sorry, your browser 
does not support Web Workers..."; 


} 
} 


function stopWorker() 


{ 


w.terminate(); 


j 


«/script» 


«/body» 
«/html» 


Web Workers 和 DOM 


由 于 web worker 位 于 外 部 文件 中 ， 它 们 无 法 访问 下 例 JavaScript x12& : 


e window 对 象 
e document 对 象 
e parent 对 象 


HTML 5 服务 器 发 送 事 件 


HTML5 服务 器 发 送 事件 (server-sent event) 人 允许 网 页 获得 来 自 服务 器 的 更 新 。 


Server-Sent 事件 - 单 向 消息 7 


Server-Sent 事件 指 的 是 网 页 自动 获取 来 自 服务 器 的 更 新 。 


以 前 也 可 能 做 到 这 一 点 ， 前 提 是 网 页 不 得 不 询问 是 否 有 可 用 的 更 新 。 通 过 服务 器 发 
送 事件 ， 更 新 能 够 自动 到 达 。 


例子 : Facebook/Twitter 更 新 、 估 价 更 新 、 新 的 博文 、 赛 事 结果 等 。 


浏览 器 文 持 


所 有 主流 浏览 器 均 支持 服务 器 发 送 事 件 ， 除 了 Internet Explorer。 


接收 Server-Sent 事件 通知 


EventSource 对 象 用 于 接收 服务 器 发 送 事件 通知 : 
实例 


var source=new EventSource("demo_sse.php"); 
source.onmessage=function(event ) 
{ 


document .getElementById("result").innerHTML+=event.data + "<br /: 


H 





例子 解释 : 


e 创建 一 个 新 的 EventSource 对 象 ， 然 后 规定 发 送 更 新 的 页 面 的 URL (本 例 中 
是 "demo_sse.php") 

。 每 接收 到 一 次 更 新 ， 就 会 发 生 onmessage 事件 

e 4 onmessage 事件 发 生 时 ， 把 已 接收 的 数据 推 入 id % "result" 的 元 素 中 


Sm) Server-Sent 事件 支持 


在 上 面 的 TIY 实例 中 ， 我 们 编写 了 一 段 额 外 的 代码 来 检测 服务 器 发 送 事件 的 浏览 器 
支持 情况 : 


if (typeof (EventSource) !=="undefined" ) 


// Yes! Server-sent events support! 
// Some code..... 


} 


else 


// Sorry! No server-sent events support.. 


} 


服务 器 端 代码 实例 


为 了 让 上 面 的 例子 可 以 运行 ， 您 还 需要 能 够 发 送 数 据 更 新 的 服务 器 (比如 PHP 和 
ASP) 。 


服务 器 端 事 件 流 的 语法 是 非常 简单 的 。 把 "Content-Type" 报头 设置 为 "text/event- 
stream"。 现 在 ， 您 可 以 开始 发 送 事件 流 了 。 


PHP 代码 (demo_sse.php) : 


<?php 
header('Content-Type: text/event-stream'); 
header('Cache-Control: no-cache'); 


$time - date('r'); 

echo "data: The server time is: {$time}\n\n"; 
flush(); 

?» 


ASP 代码 (VB) (demo sse.asp): 


<% 
Response.ContentType="text/event-stream" 
Response.Expires=-1 
Response.Write("data: " & now()) 
Response.Flush() 

%> 


代码 解释 : 
e 把 报头 "Content-Type" 设置 为 "text/event-stream" 
e. 规定 不 对 页 面 进行 缓存 
e 输出 发 送 日 期 (始终 以 "data:" 开头 ) 
e. 向 网 页 刷新 输出 数据 


EventSource xt & 


在 上 面 的 例子 中 ， 我 们 使 用 onmessage 事件 来 获取 消息 。 不 过 还 可 以 使 用 其 他 事 
件 : 


事件 描述 
onopen 当 通 往 服务 器 的 连接 被 打开 
onmessage 当 接 收 到 消息 


onerror 当 错 误 发 生 


HTML5 Input 类 型 


HTML5 新 的 Input 类 型 


HTML5 拥有 多 个 新 的 表单 输入 类 型 。 这 些 新 特性 提供 了 更 好 的 输入 控制 和 验证 。 
本 章 全 面 介 绍 这 些 新 的 输入 类 型 : 


email 

url 

number 

range 

Date pickers (date, month, week, time, datetime, datetime-local) 
search 

color 


浏览 器 支持 


Input type IE Firefox Opera Chrome Safari 
email No 4.0 9.0 10.0 No 
url No 4.0 9.0 10.0 No 
number No No 9.0 7.0 No 
range No No 9.0 4.0 4.0 
Date pickers No No 9.0 10.0 No 
search No 4.0 11.0 10.0 No 
color No No 11.0 No No 


注释 : Opera 对 新 的 输入 类 型 的 支持 最 好 。 不 过 您 已 经 可 以 在 所 有 主流 的 浏览 器 中 
使 用 它们 了 。 即 使 不 被 支持 ， 仍 然 可 以 显示 为 常规 的 文本 域 。 


Input 类 型 -email 
email 类 型 用 于 应 该 包含 e-mail 地 址 的 输入 域 。 
在 提交 表单 时 ， 会 自动 验证 email 域 的 值 。 


实例 


E-mail: <input type="email" name="user_email" /> 


提示 : iPhone 中 的 Safari 浏览 器 支持 email 输入 类 型 ， 并 通过 改变 触摸 屏 键盘 来 
配合 它 (添加 @ 和 .com 选项 ) 。 


Input 类 型 - url 


url 类 型 用 于 应 该 包含 URL 地 址 的 输入 域 。 
在 提交 表单 时 ， 会 自动 验证 url 域 的 值 。 


实例 


Homepage: <input type="url" name="user_url" /> 


提示 : iPhone 中 的 Safari 浏览 器 支持 url 输入 类 型 ， 并 通过 改变 触摸 屏 键盘 来 配合 
它 (添加 .COm 3 选项 ) 。 


Input 类 型 - number 


number 类 型 用 于 应 该 包含 数值 的 输入 域 。 
您 还 能 够 设 定 对 所 接受 的 数字 的 限定 : 


实例 


Points: <input type="number" name="points" min="1" max="10" /> 


请 使 用 下 面 的 属性 来 规定 对 数字 类 型 的 限定 : 


属性 值 描述 
max number 规定 允许 的 最 大 值 
min number 规定 允许 的 最 小 值 
规定 合法 的 数字 间隔 (如果 step="3"， 则 合法 的 数 是 
step number -3.0.3.6 等 ) 


value number 规定 默认 值 


请 试 一 下 带 有 所 有 限定 属性 的 例子 


提示 : iPhone HAY Safari 浏览 器 支持 number 输入 类 型 ， 并 通过 改变 触摸 屏 键 瘟 
来 配合 它 (显示 数字 ) 。 


Input 类 型 - range 


range 类 型 用 于 应 该 包含 一 定 范 围 内 数字 值 的 输入 域 。 
range 类 型 显示 为 滑动 条 。 
您 还 能 够 设 定 对 所 接受 的 数字 的 限定 : 


实例 


<input type="range" name-"points" min="1" max="10" /> 


请 使 用 下 面 的 属性 来 规定 对 数字 类 型 的 限定 : 


属性 值 描述 
max number 规定 允许 的 最 大 值 
min number 规定 允许 的 最 小 值 
规定 合法 的 数字 间隔 (如果 step="3"， 则 合法 的 数 是 
step number -3.0.3.6 等 ) 
value number 规定 默认 值 


Input 类 型 - Date Pickers (日 期 选择 器 ) 


HTML5 拥有 多 个 可 供 选 取 日 期 和 时 间 的 新 输入 类 型 : 


date - 选取 日 、 月 、 年 

month - 选取 月 、 年 

week - 选取 周 和 年 

time - 选取 时 间 (小 时 和 分 钟 ) 
datetime - mat A, A, B, Œ (UTC 时 间 ) 
datetime-local - # Fat jg. AL AL F 〈 本 地 时 间 ) 


下 面 的 例子 允许 您 从 日 历 中 选取 一 个 日 期 : 


实例 


Date: <input type="date" name="user_date" /> 


输入 类 型 "month": 
输入 类 型 "week": 
输入 类 型 "time": 
输入 类 型 "datetime": 


输入 类 型 "datetime-local" 


Input 类 型 - search 


search 类 型 用 于 搜索 域 ， 上 比如 站 点 搜索 或 Google 搜索 。 
search 域 显示 为 常规 的 文本 域 。 


HTML5 表单 元 素 


HTML5 的 新 的 表单 元 素 : 


HTML5 拥有 若干 涉及 表单 的 元 素 和 属性 。 


本 章 介绍 以 下 新 的 表单 元 素 : 


e datalist 
e keygen 
e output 


浏览 器 支持 


Input type IE Firefox 
datalist No No 
keygen No No 
output No No 


datalist 元 素 


datalist 元 素 规定 输入 域 的 选项 列表 。 


Opera Chrome 
9.5 No 
10.5 3.0 
9.5 No 


列表 是 通过 datalist 内 的 option 元 素 创建 的 。 
如 需 把 datalist 绑 定 到 输入 域 ， 请 用 输入 域 的 list 属性 引用 datalist 的 id : 


实例 


Webpage: «input type-"url" list="url list" name="link" /> 


<datalist id="url_list"> 


Safari 
No 
No 
No 


«option label="W3School" value="http://www.W3School.com.cn" /> 


<option label="Google" value="http://www.google.com" /> 


«option label="Microsoft" value="http://www.microsoft.com" /> 


</datalist> 


提示 : option 元 素 永 远 都 要 设置 value 属性 。 


keygen 元 素 


keygen 元 素 的 作用 是 提供 一 种 验证 用 户 的 可 靠 方法 。 


keygen 元 素 是 密 钥 对 生成 器 (key-pair generator) 。 当 提交 表单 时 ， 会 生成 两 个 
h, DEHA, NAHA. 


私 钥 (private key) 存储 于 客户 端 ， 公 钥 (public key) 则 被 发 送 到 服务 器 。 公 钥 可 
用 于 之 后 验证 用 户 的 客户 端 证 书 (client certificate) 。 


目前 ， 浏 览 器 对 此 元 素 的 糟糕 的 支持 度 不 足以 使 其 成 为 一 种 有 用 的 安全 标准 。 


实例 


«form action="demo_form.asp" method="get"> 
Username: <input type="text" name="usr_name" /> 
Encryption: «keygen name="Security" /> 

<input type="submit" /> 

</form> 


output 元 素 


output 元 素 用 于 不 同类 型 的 输出 ， 上 比如 计算 或 脚本 输出 : 
实例 


<output id="result" onforminput="resCalc()"></output> 


HTML5 表单 属性 
HTML5 的 新 的 表单 属性 


本 章 讲解 涉及 «form» 和 «input» 元 素 的 新 属性 。 


新 的 form 属性 : 


e autocomplete 
e novalidate 


新 的 input 属性 : 


autocomplete 
autofocus 

form 

form overrides (formaction, formenctype, formmethod, formnovalidate, 
formtarget) 
height 和 width 
list 

min, max 和 step 
multiple 

pattern (regexp) 
placeholder 
required 


浏览 器 支持 


Input type IE Firefox Opera Chrome Safari 
autocomplete 8.0 3.5 9.5 3.0 4.0 
autofocus No No 10.0 3.0 4.0 
form No No 9.5 No No 
form overrides No No 10.5 No No 
height and width 8.0 3.5 9.5 3.0 4.0 
list No No 9.5 No No 
min, max and step No No 9.5 3.0 No 
multiple No OD No 3.0 4.0 
novalidate No No No No No 
pattern No No 9.5 3.0 No 
placeholder No No No 3.0 3.0 
required No No 9.5 3.0 No 


autocomplete 属性 


autocomplete 属性 规定 form 8X input 域 应 该 拥有 自动 完成 功能 。 


注释 : autocomplete 适用 于 <form> 标签 ， 以 及 以 下 类 型 的 <input> 标签 text, 
search, url, telephone, email, password, datepickers, range LA color. 


当 用 户 在 自动 完成 域 中 开始 输入 时 ， 浏 览 器 应 该 在 该 域 中 显示 填写 的 选项 : 
实例 
头 


«form action="demo_form.asp" method="get" autocomplete="on"> 

First name: <input type="text" name="fname" /><br /> 

Last name: <input type="text" name-"lname" /><br /> 

E-mail: <input type="email" name="email" autocomplete-"off" /><br , 
<input type="submit" /> 

</form> 


注释 : 在 某 些 浏览 器 中 ， 您 可 能 需要 启用 自动 完成 功能 ， 以 使 该 属性 生效 。 





autofocus 属性 


autofocus 属性 规定 在 页 面 加 载 时 ， 域 自动 地 获得 焦点 。 
注释 : autofocus 属性 适用 于 所 有 <input> 标签 的 类 型 。 


实例 


User name: <input type="text" name-"user name" autofocus="autofoct 


rom a | 








form 属性 


form 属性 规定 输入 域 所 属 的 一 个 或 多 个 表单 。 
注释 : form 属性 适用 于 所 有 «input» 标签 的 类 型 。 
form 属性 必须 引用 所 属 表 单 的 id : 


实例 


<form action="demo_form.asp" method="get" id="user_form"> 
First name:<input type="text" name="fname" /> 

<input type="submit" /> 

</form> 

Last name: <input type="text" name-"lname" form="user_form" /> 


注释 : 如 需 引 用 一 个 以 上 的 表单 ， 请 使 用 空格 分 隔 的 列表 。 


表单 重 写 属性 
表单 重 写 属 性 (form override attributes) 人 允许 您 重 写 form 元 素 的 某 些 属性 设 定 。 
表单 重 写 属 性 有 : 


formaction - 重 写 表单 的 action 属性 
formenctype - 重 写 表 单 的 enctype 属性 
formmethod - 重 写 表单 的 method 属性 
formnovalidate - 重 写 表 单 的 novalidate 属性 
formtarget - 重 写 表 单 的 target 属性 


注释 : 表单 重 写 属 性 适用 于 以 下 类 型 的 <input> 标签 : submit 和 image。 


实例 


«form action="demo_form.asp" method="get" id="user_form"> 

E-mail: <input type="email" name="userid" /><br /> 

<input type="submit" value="Submit" /> 

<br /> 

<input type="submit" formaction="demo_admin.asp" value="Submit as : 
<br /> 

<input type="submit" formnovalidate="true" value="Submit without Vi 
<br /> 

</form> 


‘ ae 








注释 : 这 些 属 性 对 于 创建 不 同 的 提交 按钮 很 有 帮助 。 


height 和 width 属性 


height 和 width 属性 规定 用 于 image 类 型 的 input 标签 的 图 像 高 度 和 宽度 。 
注释 : height 和 width 属性 只 适用 于 image 类 型 的 <input> 标签 。 


实例 


<input type="image" src="img_submit.gif" width="99" height="99" /> 


eg L 
list 属性 


list 属性 规定 输入 域 的 datalist。datalist 是 输入 域 的 选项 列表 。 


注释 : list 属性 适用 于 以 下 类 型 的 <input> 标签 : text, search, url, telephone, email, 
date pickers, number, range LA color. 


实例 


Webpage: «input type="url" list="url_list" name="link" /> 
<datalist id="url_list"> 

<option label="W3Schools" value="http://www.w3school.com.cn" /> 
«option label="Google" value="http://www.google.com" /> 

<option label="Microsoft" value="http://www.microsoft.com" /> 
</datalist> 


min, max 和 step 属性 


min, max 和 step 属性 用 于 为 包含 数字 或 日 期 的 input 类 型 规定 限定 (约束 ) 。 
max 属性 规定 输入 域 所 允许 的 最 大 值 。 

min 属性 规定 输入 域 所 允许 的 最 小 值 。 

属性 为 输入 域 规定 合法 的 数字 间隔 (ADR step="3"， 则 合法 的 数 是 -3,0,3,6 


o 


注释 : min, max 和 step 属性 适用 于 以 下 类 型 的 <input> 标签 : date pickers, 
number 以 及 range。 


下 面 的 例子 显示 一 个 数字 域 ， 该 域 接受 介 于 0 到 10 之 间 的 值 ， 且 步 进 为 3 (BA 
法 的 值 为 0、3、6 和 9) : 


实例 


Points: <input type="number" name="points" min="0" max="10" step=": 


| 





multiple 属性 


multiple 属性 规定 输入 域 中 可 选择 多 个 值 。 
注释 : multiple 属性 适用 于 以 下 类 型 的 «input» 标签 : email 和 file, 


实例 


Select images: <input type="file" name="img" multiple="multiple" /: 





novalidate 属性 


novalidate 属性 规定 在 提交 表单 时 不 应 该 验证 form 或 input 域 。 


注释 : novalidate 属性 适用 于 <form> 以 及 以 下 类 型 的 <input> 标签 : text, search, 
url, telephone, email, password, date pickers, range 以 及 color. 


实例 


<form action="demo_form.asp" method="get" novalidate="true"> 
E-mail: <input type="email" name="user_email" /> 

<input type="submit" /> 

</form> 


pattern 属性 


pattern 属性 规定 用 于 验证 input 域 的 模式 (pattern) 。 


模式 (pattern) 是 正则 表达 式 。 您 可 以 在 我 们 的 JavaScript 教程 中 学 习 到 有 关 正 
则 表达 式 的 内 容 。 


注释 : pattern 属性 适用 于 以 下 类 型 的 «input» 标签 : text, search, url, telephone, 
email 以 及 password. 


下 面 的 例子 显示 了 一 个 只 能 包含 三 个 字母 的 文本 域 (不 含 数字 及 特殊 字符 ) 
实例 


Country code: <input type="text" name="country_code" 
pattern="[A-z]{3}" title="Three letter country code" /> 


placeholder 属性 


placeholder 属性 提供 一 种 提示 (hint) ， 描 述 输入 域 所 期 待 的 值 。 


注释 : placeholder 属性 适用 于 以 下 类 型 的 <input> 标签 : text, search, url, 
telephone, email 以 及 password. 


fem (hint) 会 在 输入 域 为 空 时 显示 出 现 ， 会 在 输入 域 获得 焦点 时 消失 : 


实例 


<input type-"search" name="user_search" placeholder="Search W3Sch« 





required 属性 


required 属性 规定 必须 在 提交 之 前 填写 输入 域 (不 能 为 空 ) 。 


注释 : required 属性 适用 于 以 下 类 型 的 «input» 标签 : text, search, url, telephone, 
email, password, date pickers, number, checkbox, radio 以 及 file。 


n 


实例 


A, 


Name: <input type="text" name="usr_name" required="required" /> 


CSS 样式 


CSS 背景 


CSS 人 允许 应 用 纯色 作为 背景 ， 也 人 允许 使 用 背景 图 像 创 建 相当 复杂 的 效果 。 
CSS 在 这 方面 的 能 力 远 远 在 HTML 之 上 。 
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可 以 使 用 background-color 属性 为 元 素 设置 背景 色 。 这 个 属性 接受 任何 合法 的 颜色 
值 。 


这 条 规则 把 元 素 的 背景 设置 为 灰色 : 


p {background-color: gray; } 


如 果 您 希望 背景 色 从 元 素 中 的 文本 向 外 少 有 延伸 ， 只 需 增 加 一 些 内 边 距 : 
p {background-color: gray; padding: 20px;} 
如 需 查 看 本 例 的 效果 ， 可 以 ! 


可 以 为 所 有 元 素 设 置 背 景色 ， 这 包括 body 一 直到 em 和 a 等 行内 元 素 。 


background-color 不 能 继承 ， 其 默认 值 是 transparent。transparent 有 “透明 ”之 意 。 
也 就 是 说 ， 如 果 一 个 元 素 没 有 指定 背景 色 ， 那 么 背景 就 是 透明 的 ， 这 样 其 祖先 元 素 
的 背景 才能 可 见 。 


背景 图 像 


要 把 图 像 放 入 背景 ， 需 要 使 用 background-image 属性 。background-image 属性 的 
默认 值 是 none， 表 示 背 景 上 没有 放置 任何 图 像 。 


如 果 需 要 设置 一 个 背景 图 像 ， 必 须 为 这 个 属性 设置 一 个 URL 值 : 


body {background-image: url(img/eg_bg_04.gif);} 


大 多 数 背 景 都 应 用 到 body 元 素 ， 不 过 并 不 仅 限于 此 。 
下 面 例子 为 一 个 段落 应 用 了 一 个 背景 ， 而 不 会 对 文档 的 其 他 部 分 应 用 背景 : 


p.flower {background-image: url(img/eg_bg_03.gif);} 


您 其 至 可 以 为 行内 元 素 设置 背景 图 像 ， 下 面 的 例子 为 一 个 链接 设置 了 背景 图 像 : 


a.radio {background-image: url(img/eg_bg_07.gif);} 


如 需 查 看 上 述 例子 的 效果 ， 可 以 ! 


理论 上 讲 ， 基 至 可 以 向 textareas 和 select 等 替换 元 素 的 背景 应 用 图 像 ， 不 过 并 不 
是 所 有 用 户 代 理 都 能 很 好 地 处理 这 种 情况 。 


另外 还 要 补充 一 点 ，background-image 也 不 能 继承 。 事 实 上 ， 所 有 背景 属性 都 不 
能 继承 。 


背景 重复 


如 果 需 要 在 页 面 上 对 背景 图 像 进行 平 铺 ， 可 以 使 用 background-repeat 属性 。 


属性 值 repeat 导致 图 像 在 水 平 垂直 方向 上 都 平 铺 ， 就 像 以 往 背 景 图 像 的 通常 做 法 一 
样 。repeat-x 和 repeat-y 分 别 导致 图 像 只 在 水 平 或 垂直 方向 上 重复 ，no-repeat 则 
不 允许 图 像 在 任何 方向 上 平 铺 。 


默认 地 ， 背 景 图 像 将 从 一 个 元 素 的 左上 角 开 始 。 请 看 下 面 的 例子 
body 
{ 
background-image: url(img/eg_bg_03.gif); 


background-repeat: repeat-y; 


} 


如 需 查看 上 例 的 效果 ， 可 以 。 
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可 以 利用 background-position 属性 改变 图 像 在 背景 中 的 位 置 。 
下 面 的 例子 在 body 元 素 中 将 一 个 背景 图 像 居 中 放置 : 
body 
{ 
background-image:url('/i/eg bg 03.gif'); 


background-repeat:no-repeat; 
background-position:center; 


3j background-position 属性 提供 值 有 很 多 方法 。 首 先 ， 可 以 使 用 一 些 关 键 字 : 
top. bottom, left, right 和 center, 通常 ， 这 些 关 键 字 会 成 对 出 现 ， 不 过 也 不 总 是 
这 样 。 还 可 以 使 用 长 度 值 ， 如 100px 或 5cm， 最 后 也 可 以 使 用 百分数 值 。 不 同类 
型 的 值 对 于 背景 图 像 的 放置 稍 有 差异 。 

AE 

图 像 放置 关键 字 最 容易 理解 ， 其 作用 如 其 名 称 所 表明 的 。 例 如 ，top right HARM 
置 在 元 素 内 边 距 区 的 右上 和 角 。 


根据 规范 ， 位 置 关 键 字 可 以 按 任何 顺序 出 现 ， 只 要 保证 不 超过 两 个 关键 字 - 一 个 对 
应 水 平方 向 ， 另 一 个 对 应 垂直 方向 。 


如 果 只 出 现 一 个 关键 字 ， 则 认为 另 一 个 关键 字 是 center. 
所 以 ， 如 果 希 望 每 个 段落 的 中 部 上 方 出 现 一 个 图 像 ， 只 需 声明 如 下 : 


background-image:url('bgimg.gif'); 
background-repeat:no-repeat; 
background-position:top; 


下 面 是 等 价 的 位 置 关键 字 : 


单一 关键 字 等 价 的 关键 字 
center center center 
top top center 或 center top 
bottom bottom center 或 center bottom 
right right center 或 center right 
left left center 或 center left 
百分数 值 


百分数 值 的 表现 方式 更 为 复杂 。 假 设 你 希望 用 百分数 值 业 图 像 在 其 元 素 中 居中 ， 这 
很 容易 : 


body 
{ 


background-image:url('/i/eg bg 03.gif'); 
background-repeat:no-repeat; 
background-position:50% 50%; 


会 导致 图 像 适当 放置 ， 其 中 心 与 其 元 素 的 中 心 对 齐 。 换 句 话说， 百分数 值 同时 应 
ae era ib. 也 就 是 说 ， 图 像 中 描述 为 50965096 的 点 (中 心 点 ) 与 元 素 中 描 
述 为 5096 50% 的 点 (HDR) 对 齐 。 


如 果 图 像 位 于 0% 0%， 其 左上 和 角 将 放 在 元 素 内 边 距 区 的 左上 角 。 如 果 图 像 位 置 是 
100% 100%, a 边 距 的 右 下 角 。 


因此 ， 如 果 你 想 把 一 个 图 像 放 在 水 平方 向 2/03、 垂 直方 向 1/3 处 ， 可 以 这 样 声明 : 


body 


{ 
background-image:url('/i/eg bg 03.gif'); 
background-repeat:no-repeat; 
background-position: 66% 33%; 

} 


如 果 只 提供 一 个 百分数 值 ， 所 提供 的 这 个 值 将 用 作 水 平 值 ， 垂 直 值 将 假设 为 50%。 
这 一 点 与 关键 字 类 似 。 


background-position 的 默认 值 是 0% 0%， 在 功能 上 相当 于 top left。 这 就 解释 了 背 
景 图 像 为 什么 总 是 从 元 素 内 边 距 区 的 左上 角 开 始 平 铺 ， 除 非 您 设置 了 不 同 的 位 置 
值 。 


长 度 值 
长 度 值 解 释 的 是 元 素 内 边 距 区 左上 角 的 偏 移 。 偏 移 点 是 图 像 的 左上 和 角 。 


比如 ， 如 果 设 置 值 为 50px 100px， 图 像 的 左上 角 将 在 元 素 内 边 距 区 左上 和 角 向 右 50 
像素 、 向 下 100 像素 的 位 置 上 : 


body 


{ 
background-image:url('/i/eg bg 03.gif'); 
background-repeat:no-repeat; 
background-position:50px 100px; 

j 


注意 ， 这 一 点 与 百分数 值 不 同 ， 因 为 偏 移 只 是 从 一 个 左上 角 到 另 一 个 左上 角 。 也 就 
是 说 ， 图 像 的 左上 角 与 background-position 声明 中 的 指定 的 点 对 齐 。 


AERAR 

如 果 文 档 比 较 长 ， 那 么 当 文 档 向 下 滚动 时 ， 背 景 图 像 也 会 随 之 滚动 。 当 文档 滚动 到 
超过 图 像 的 位 置 时 ， 图 像 就 会 消失 。 

您 可 以 通过 background-attachment 属性 防止 这 种 滚动 。 通 过 这 | 个 属性 ， 可 以 声明 
图 像 相 对 于 可 视 区 是 固定 的 (fixed) ， 因 此 不 会 受到 滚动 的 影响 


body 


{ 
background-image:url(img/eg_bg_02.gif); 
background-repeat:no-repeat; 
background-attachment: fixed 


} 


如 需 查 看 上 例 的 效果 ， 可 以 。 
background-attachment 属性 的 默认 值 是 scroll， 也 就 是 说 ， 在 默认 的 情况 下 ， 背 景 
会 随 文档 滚动 。 


CSS 背景 实例 

设置 背景 颜色 
设置 文本 的 背景 颜色 

将 图 像 设 置 为 背景 
将 图 像 设 置 为 背景 

如 何 重复 背景 图 像 

如 何在 垂直 方向 重复 背景 图 像 
如 何在 水 平方 向 重复 背景 图 像 
如 何 仅 显示 一 次 背景 图 像 

如 何 放置 背景 图 像 

如 何 使 用 % 来 定位 背景 图 像 
如 何 使 用 像素 来 定位 背景 图 像 
如 何 设置 固定 的 背景 图 像 

所 有 背景 属性 在 一 个 声明 之 中 


CSS 背景 属性 


W3School Html & Css 教程 


background 
background-attachment 
background-color 
background-image 
background-position 


background-repeat 


CSS 


ab ES 
EER 


描述 
简写 属性 ， 作 用 是 将 背景 属性 设置 在 一 个 声明 中 。 
背景 图 像 是 否 固定 或 者 随 着 页 面 的 其 余部 分 滚动 。 
JIRA RE. 
把 图 像 设 置 为 背景 。 
设置 背景 图 像 的 起 始 位 置 
设置 背景 图 像 是 否 及 如 何 重复 。 
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CSS 文本 


CSS 文本 属性 可 定义 文本 的 外 观 。 

通过 文本 属性 ， 您 可 以 改变 文本 的 颜色 、 字 符 间 距 ， 对 齐 文本 ， 装 饰 文 本 ， 对 文本 
进行 缩 进 ， 等 等 。 

缩 进 文本 

把 Web 页 面 上 的 段落 的 第 一 行 缩 进 ， 这 是 一 种 最 常用 的 文本 格式 化 效果 。 

CSS 提供 了 text-indent 属性 ， 该 属性 可 以 方便 地 实现 文本 缩 进 。 


通过 使 用 text-indent 属性 ， 所 有 元 素 的 第 一 行 都 可 以 缩 进 一 个 给 定 的 长 度 ， 甚 至 该 
长 度 可 以 是 负 值 。 


这 个 属性 最 常见 的 用 途 是 将 段落 的 首 行 缩 进 ， 下 面 的 规则 会 使 所 有 段落 的 首 行 缩 进 
5em: 


p {text-indent: 5em;} 


注意 : 一 般 来 说 ， 可 以 为 所 有 块 级 元 素 应 用 text-indent， 但 无 法 将 该 属性 点 用 于 行 
内 元 素 ， 图 像 之 类 的 替换 元 素 上 也 无 法 应 用 text-indent 属性 。 不 过 ， 如 果 一 个 块 级 
TR (比如 段落 ) 的 首 行 中 有 一 个 图 像 ， 它 会 随 该 行 的 其 余 文 本 移动 。 

提示 : 如 果 想 把 一 个 行内 元 素 的 第 一 行 “ 缩 进 "， 可 以 用 左 内 边 距 或 外 边 距 创造 这 种 
效果 。 

使 用 负 值 


text-indent 还 可 以 设置 为 负 值 。 利 用 这 种 技术 ， 可 以 实现 很 多 有 趣 的 效果 ， 比 如 “有 其 
挂 缩 进 ”， 即 第 一 行 悬 挂 在 元 素 中 余下 部 分 的 左边 : 


p {text-indent: -5em;} 


不 过 在 为 text-indent 设置 负 值 时 要 当心 ， 如 果 对 一 个 段落 设置 了 负 值 ， 那 么 首 行 的 
某 些 文本 可 能 会 超出 浏览 器 窗口 的 左边 界 。 为 了 避免 出 现 这 种 显示 问题 ， 建 议 针对 
负 缩 进 再 设置 一 个 外 边 距 或 一 些 内 边 距 : 


p (text-indent: -5em; padding-left: 5em;} 


使 用 百分比 值 


text-indent 可 以 使 用 所 有 长 度 单位 ， 包 括 百 分 比值 。 


百分数 要 相对 于 缩 进 元 素 父 元 素 的 宽度 。 换 句 话说 ， 如 果 将 缩 进 值 设置 为 20%， 所 
影响 元 素 的 第 一 行 会 缩 进 其 父 元 素 宽 度 的 20%。 


在 下 例 中 ， 缩 进 值 是 父 元 素 的 20%， 即 100 个 像素 : 


div {width: 500px;} 
p {text-indent: 20%;} 


<div> 
<p>this is a paragragh</p> 
</div> 


继承 
text-indent 属性 可 以 继承 ， 请 考虑 如 下 标记 : 


div#outer (width: 500px; } 
div#inner {text-indent: 10%; } 
p (width: 200px;} 


«div id="outer"> 

«div id="inner">some text. some text. some text. 
<p>this is a paragragh.</p> 

«/div» 

«/div» 


E S 会 缩 进 50 像素 ， 这 是 因为 这 个 段落 继承 了 id 为 inner 的 div 
元 素 的 缩 进 


水 平 对 齐 


text-align 是 一 个 基本 的 属性 ， 它 会 影响 一 个 元 素 中 的 文本 行 互相 之 间 的 对 齐 方 式 。 
它 的 前 3 个 值 相 当 直 接 ， 不 过 第 4 个 和 第 5 个 则 略 有 些 复 灯 。 


值 left、right 和 center 会 导致 元 素 中 的 文本 分 别 左 对 齐 、 右 对 齐 和 居中 。 


西方 语言 都 是 从 左 向 右 读 ， 所 有 text-align 的 默认 值 是 left。 文 本 在 左边 界 对 齐 ， 右 
边界 呈 锯 齿 状 〈 称 为 “从 左 到 右 " 文 本 ) 。 对 于 希 伯 来 语 和 阿拉 伯 语 之 类 的 的 语言 ， 
text-align 则 默认 为 right， 因 为 这 些 语 BM. 不 出 所 料 ，center 会 使 每 个 
文本 行 在 元 素 中 居中 。 


提示 : 将 块 级 元 素 或 表 元 素 居中 ， 要 通过 在 这 些 元 素 上 适当 地 设置 左 、 右 外 边 距 来 
实现 。 


text-align:center 与 <CENTER> 


您 可 能 会 认为 textralign:center 与 «CENTER» 元 素 的 作用 一 样 ， 但 实际 上 二 者 大 
不 相同 。 


«CENTER? 不 仅 影 响 文 本 ， 还 会 把 整个 元 素 居中 。text-align 不 会 控制 元 素 的 对 
3r, m 而 只 影响 内 部 内 容 。 元 素 本 身 不 会 从 一 段 移 到 另 一 端 ， 只 是 其 中 的 文本 受 影 
响 。 

justify 

最 后 一 个 水 平 对 齐 属 性 是 justify。 


在 两 端 对 齐 文 本 中 ， 文 本 行 的 左右 两 端 都 放 在 父 元 素 的 内 边界 上 。 然 后 ， 调 整 单词 
和 字母 间 的 间隔 ， 使 各 行 的 长 度 恰好 相等 。 您 也 许 已 经 注意 到 了 ， 两 端 对 齐 文 本 在 
打印 领域 很 常见 


需要 注意 的 是 ， 要 由 用 户 代理 (而 不 是 CSS) 来 确定 两 端 对 齐 文 本 如 何 拉 伸 ， 以 填 


满 父 元 素 左 右边 界 之 间 的 空间 。 如 需 了 解 详 情 ， 请 参阅 CSS ne -align 属性 参考 
To 


ri qmm 
+ [8] bs 
word-spacing 属性 可 以 改变 字 (单词 ) 之 间 的 标准 间隔 。 其 默认 值 normal 与 设置 
值 为 0 是 一 样 的 。 
word-spacing 属性 接受 一 个 正 长 度 值 或 负 长 度 值 。 如 果 提 供 一 个 正 长 度 值 ， 那 么 字 
之 间 的 间隔 就 会 增加 。 为 word-spacing 设置 一 个 负 值 ， 会 把 它 拉 近 : 
p.spread {word-spacing: 30px;} 
p.tight {word-spacing: -0.5em;) 
«p class="Spread"> 
This is a paragraph. The spaces between words will be increased. 
</p> 
<p class="tight"> 


This is a paragraph. The spaces between words will be decreased. 
</p> 


实例 TIY : 增加 或 减少 单词 间距 〈 字 间隔 ) 
注释 : 如 需 深 入 理解 CSS 对 “ 字 ”(word) 的 定义 ， 请 访问 CSS word-spacing 属性 


字母 间隔 


letter-spacing 属性 与 word-spacing 的 区 别 在 于 ， 字 母 间 隔 修改 的 是 字符 或 字母 之 
间 的 间隔 。 


与 word-spacing 属性 一 样 ，letter-spacing 属性 的 可 取 值 包括 所 有 长 度 。 默 认 关 键 
FÆ normal (3x4 letter-spacing:0 相同 ) 。 输 入 的 长 度 值 会 使 字母 之 间 的 间隔 增 
加 或 减少 指定 的 量 : 


hi {letter-spacing: -0.5em} 
h4 {letter-spacing: 20px} 


<hi>This is header 1</h1> 
<h4>This is header 4</h4> 


实例 TIY : 规定 字符 间距 (字母 间隔 ) 


字符 转换 


text-transform 属性 处 理 文本 的 大 小 写 。 这 个 属性 有 4 个 值 : 


none 
uppercase 
lowercase 
capitalize 


默认 值 none 对 文本 不 做 任何 改动 ， 将 使 用 源 文档 中 的 原 有 大 小 写 。 顾 名 思 义 ， 
uppercase 和 lowercase 将 文本 转换 为 全 大 宇和 全 小 写字 符 。 最 后 ，capitalize 只 
对 每 个 单词 的 首 字 母 大 写 。 


作为 一 个 属性 ，text-transform 可 能 无 关 紧 要 ， 不 过 如 果 您 突然 决定 把 所 有 h1 元 素 
变 为 大 写 ， 这 个 属性 就 很 有 用 。 不 必 单 独 地 修改 所 有 h1 元 素 的 内 容 ， 只 需 使 用 
text-transform 为 你 完成 这 个 修改 : 


h1 {text-transform: uppercase} 


使 用 text-transform 有 两 方面 的 好 人 处。 首先 ， 只 需 写 一 个 简单 的 规则 来 完成 这 个 修 
改 ， 而 无 需 修改 h1 元 素 本 身 。 其 次 ， 如 果 您 以 后 决定 将 所 有 大 小 写 再 切换 为 原来 
的 大 小 写 ， 可 以 更 容易 地 完成 修改 。 


实例 TY : 控制 文本 中 字母 的 大 小 宇 
MARE hi 
接 下 来 ， 我 们 讨论 text-decoration 属性 ， 这 是 一 个 很 有 意思 的 属性 ， 它 提供 了 很 多 


非常 有 趣 的 行为 。 
text-decoration 有 5 个 值 : 


none 
underline 
overline 
line-through 
blink 


AHA, underline 会 对 元 素 加 下 划 线 ， 就 像 HTML 中 的 U 元 素 一 样 。overline 
的 作用 恰好 相反 ， 会 在 文本 的 顶端 画 一 个 上 划 线 。 值 line-through 则 在 文本 中 间 画 
一 个 贯穿 线 ， 等 价 于 HTML 中 的 All strike 元 素 。blink 会 让 文本 闪烁 ， 类 似 于 
Netscape 支持 的 颇 招 非议 的 blink 标记 。 


none 值 会 关闭 原本 应 用 到 一 个 元 素 上 的 所 有 装饰 。 通 常 ， 无 装饰 的 文本 是 默认 外 


观 ， 但 也 不 总 是 这 样 。 例 如 ， 链 接 默 认 地 会 有 下 划 线 。 如 果 您 希望 去 掉 超 链接 的 下 
划 线 ， 可 以 使 用 以 下 CSS 来 做 到 这 一 点 : 


a {text-decoration: none; } 


注意 : 如 果 显 式 地 用 这 样 一 个 规则 去 掉 链 接 的 下 划 线 ， 那 么 锚 与 正常 文本 之 间 在 视 
觉 上 的 唯一 差别 就 是 颜色 (至少 默认 是 这 样 的， 不 过 也 不 能 完全 保证 其 颜色 肯定 有 
区 别 ) 。 

还 可 以 在 一 个 规则 中 结合 多 种 装饰 。 如 果 希 望 所 有 超 链 接 既 有 下 划 线 ， 又 有 上 划 
线 ， 则 规则 如 下 : 


a:link a:visited {text-decoration: underline overline; } 


不 过 要 注意 的 是 ， 如 果 两 个 不 同 的 装饰 都 与 同一 元 素 匹 配 ， 胜 出 规则 的 值 会 完全 取 
代 另 一 个 值 。 请 考虑 以 下 的 规则 : 


h2.stricken {text-decoration: line-through; } 
h2 {text-decoration: underline overline; } 


对 于 给 定 的 规则 ， 所 有 class 为 stricken 的 h2 元 素 都 只 有 一 个 贯穿 线装 饰 ， 而 没 
有 下 划 线 和 上 划 线 ， 因 为 text-decoration 值 会 替换 而 不 是 累积 起 来 。 


处 理 空白 符 


white-space 属性 会 影响 到 用 户 代 理 对 源 文 档 中 的 空格 、 换 行 和 tab 字符 的 处 理 。 


通过 使 用 该 属性 ， 可 以 影响 浏览 器 处 理 字 之 间 和 文本 行 之 间 的 空白 符 的 方式 。 从 某 
种 程度 上 讲 ， 默 认 的 XHTML 义理 已 经 完成 了 空白 符 处 理 : 它 会 把 所 有 空白 符合 并 
为 一 个 空格 。 所 以 给 定 以 下 标记 ， 它 在 Web 浏览 器 中 显示 时 ， 各 个 字 之 间 只 会 显 
示 一 个 空格 ， 同 时 忽略 元 素 中 的 换行 : 


<p>This paragraph has many 
spaces in it.</p> 


可 以 用 以 下 声明 显 式 地 设置 这 种 默认 行为 : 


p {white-space: normal;j 


上 面 的 规则 告诉 浏览 器 按照 平常 的 做 法 去 处 理 : 丢掉 多 余 的 空白 符 。 pec 
i 换行 字符 (Il) 会 转换 为 空格 ， 一 行 中 多 个 空格 的 序列 也 会 转换 为 一 


实例 TIY : white-space: normal 


值 pre 
不 过 ， 如 果 将 white-space 设置 为 pre， 受 这 -1 空白 符 的 处 理 
就 有 所 不 同 ， 其 行为 就 像 XHTML 的 pre 元 素 一 空白 符 不 会 被 忽略 。 


如 果 white-space 属性 的 值 为 pre， 浏 览 器 将 会 注意 额外 的 空格 ， 甚 至 回 车 。 在 这 
个 方面 ， 而 且 仅 在 这 个 方面 ， 任何 元 素 都 可 以 相当 于 一 个 pre 元 素 。 


实例 TIY : white-space: pre 
注意 : 经 测试 ，IE 7 以 及 更 早 版 本 的 浏览 器 不 支持 该 值 ， 因 此 请 使 用 非 IE 的 浏览 
器 来 查看 上 面 的 实例 。 


值 nowrap 


与 之 相对 的 值 是 nowrap， 它 会 防止 元 素 中 的 文本 换行 ， 除非 使 用 了 一 个 br 元 素 。 
在 CSS 中 使 用 nowrap 非常 类 似 于 HTML 4 中 用 «td nowrap> 将 一 个 表单 元 格 设 
置 为 不 能 换行 ， 不 过 white-space 值 可 以 应 用 到 任何 元 素 。 


实例 TIY : white-space: nowrap 


{4 pre-wrap 和 pre-line 
CSS2.1 8I A T 44 pre-wrap 和 pre-line， 这 在 以 前 版 本 的 CSS 中 是 没有 的 。 这 些 
值 的 作用 是 允许 创作 人 员 更 好 地 控制 空白 符 处 理 。 


如 果 元 素 的 white-space 设置 为 pre-wrap， 那 么 该 元 素 中 的 文本 会 保留 空白 符 序 
列 ， 但 是 文本 行 会 正常 地 换行 。 如 果 设 置 为 这 个 值 ， 源 文本 中 的 行 分 隔 符 以 及 生成 
的 行 分 隔 符 也 会 保留 。pre-line 与 pre-wrap 相反 ， 会 像 正常 文本 中 一 样 合 并 空白 符 
序列 ， 但 保留 换行 符 。 


实例 TIY : white-space: pre-wrap 
实例 TIY : white-space: pre-line 


注意 : 我 们 在 IE7 和 FireFox2.0 浏览 器 中 测试 了 上 面 的 两 个 实例 ， 但 是 结果 是 ， 值 
pre-wrap 和 pre-line 都 没有 得 到 很 好 的 支持 。 


总 结 


^ 


下 面 的 表格 总 结 了 white-space 属性 的 行为 : 


值 
pre-line 
normal 
nowrap 
pre 


pre-wrap 


SARA A 


空白 符 


换行 符 
保留 
忽略 
忽略 
保留 
保留 


目 动 换行 


如 果 您 阅读 的 是 英文 书籍 ， 就 会 从 左 到 右 、 从 上 到 下 地 阅读 ， 这 就 是 英文 的 流 方 
向 。 不 过 ， 并 不 是 所 有 语言 都 如 此 。 我 们 知道 古 汉 语 就 是 从 右 到 左 来 阅读 的 ， 当 然 
还 包 插 希 伯 来 语 和 阿拉 伯 语 等 等 。CSS2 引入 了 一 个 属性 来 描述 其 方向 性 。 


direction 属性 影响 块 级 元 素 中 文本 的 书写 方向 、 表 中 列 布 局 的 方向 、 内 容 水 平 填充 


其 元 素 框 的 方向 、 以 及 两 端 对 齐 元 素 中 最 后 一 行 的 位 置 。 


注释 : 对 于 行内 元 素 ， 只 有 当 unicode-bidi 属性 设置 为 embed 或 bidi-override 时 


会 应 用 direction 属性 。 


direction 属性 有 两 个 值 : ltr 和 rtl。 大 多 数 情 况 下 ， 默 认 值 是 ltr， 显示 从 左 到 右 的 文 
本 。 如 果 显 示 从 右 到 左 的 文本 ， 应 使 用 值 rtl。 


CSS 文本 实例 : 


设置 文本 颜色 
设置 文本 的 背景 颜色 
规定 字符 间距 

使 用 百分比 设置 行 间距 
使 用 像素 值 设置 行 间距 
使 用 数值 来 设置 行 间距 
对 齐 文 本 


W3School Html & Css 教程 


控制 文本 中 的 字母 
在 元 素 中 茶 止 文本 折 行 
增加 单词 间距 


CSS 文本 属性 


属性 描述 
color 设置 文本 颜色 
direction 设置 文本 方向 。 
line-height 设置 行 高 。 
letter- : 
ES 1 p. 
spacing 设置 字符 间 EB. 
text-align 对 齐 元 素 中 的 文本 。 
text- Nx ag 
decoration 向 文本 添加 修饰 。 
text-indent 缩 进 元 素 中 文本 的 首 行 。 
By An 1 E3 NA SD 
Te hado EN cu CSS2 包含 该 属性 ， 但 是 CSS2.1 没有 保留 该 


text- 
transform 


unicode-bidi 
white-space 


word-spacing 


CSS 文本 


控制 元 素 中 的 字母 。 


CSS 字体 


CSS 字体 属性 定义 文本 的 字体 系列 、 大 小 、 加 粗 、 风 格 〈 如 斜体 ) 和 变形 (如 小 型 
大 写字 母 ) 。 


CSS 字体 系列 


在 CSS 中 ， 有 两 种 不 同类 型 的 字体 系列 名 称 : 


e 通用 字体 系列 - 拥有 相似 外 观 的 字体 系统 组 合 〈 比 如 "Serif" 或 "Monospace") 
e 特定 字体 系列 - 具体 的 字体 系列 (EA "Times" g "Courier") 


除了 各 种 特定 的 字体 系列 外 ，CSS 定义 了 5 种 通用 字体 系列 : 


e Serif 字体 

e Sans-serif 字体 
e Monospace 字体 
e Cursive 字体 

e Fantasy 字体 


如 果 需 要 了 解 更 多 有 关 字 体系 列 的 知识 ， 请 阅读 CSS 字体 系列 。 


目下 字体 系列 
使 用 font-family 属性 定义 文本 的 字体 系列 。 


使 用 通用 字体 系列 
如 果 你 希望 文档 使 用 一 种 sans-serif 字体 ， 但 是 你 并 不 关心 是 哪 一 种 字体 ， 以 下 就 


是 一 个 合适 的 声明 : 


body (font-family: sans-serif;j 


这 样 用 户 代理 就 会 从 sans-serif 字体 系列 中 选择 一 个 字体 (如 Helvetica) ， 并 将 其 
应 用 到 body 元 素 。 因 为 有 继承 ， 这 种 字体 选择 还 将 应 用 到 body 元 素 中 包含 的 所 
有 元 素 ， 除 非 有 一 种 更 特定 的 选择 器 将 其 覆盖 。 

指定 字体 系列 

除了 使 用 通用 的 字体 系列 ， 您 还 可 以 通过 font-family 属性 设置 更 具体 的 字体 。 

下 面 的 例子 为 所 有 h1 元 素 设 置 了 Georgia 字体 : 


hi (font-family: Georgia; } 


这 样 的 规则 同时 会 产生 另外 一 个 问题 ， 如 果 用 户 代理 上 没有 安装 Georgia 字体 ， 就 
只 能 使 用 用 户 代理 的 默认 字体 来 显示 h1 元 素 。 


我 们 可 以 通过 结合 特定 字体 名 和 通用 字体 系列 来 解决 这 个 问题 : 


hi (font-family: Georgia, serif; } 


如 果 读 者 没有 安装 Georgia， 但 安装 了 Times 字体 (serif 字体 系列 中 的 一 种 字 
体 ) ， 用 户 代理 就 可 能 对 h1 元 素 使 用 Times。 尽 管 Times 与 Georgia 并 不 完全 匹 
配 ， 但 至 少 足够 接近 。 


因此 ， 我 们 建议 在 所 有 font-family 规则 中 都 提供 一 个 通用 字体 系列 。 这 样 就 提供 了 
一 条 后 路 ， 在 用 户 代理 无 法 提供 与 规则 匹配 的 特定 字体 时 ， 就 可 以 选择 一 个 候选 字 
体 


o 


如 果 您 对 字体 非常 熟悉 ， 也 可 以 为 给 定 的 元 素 指定 一 系列 类 似 的 字体 。 要 做 到 这 一 
点 ， 需 要 把 这 些 字体 按照 优先 顺序 排列 ， 然 后 用 逗号 进行 连接 : 


p {font-family: Times, TimesNR, 'New Century Schoolbook', 
Georgia, 'New York', serif;} 


根据 这 个 列表 ， 用 户 代理 会 按 所 列 的 顺序 查找 这 些 字体 。 如 果 列 出 的 所 有 字体 都 不 
可 用 ， 就 会 简单 地 选择 一 种 可 用 的 serif 字体 。 


使 用 引号 


您 也 许 已 经 注意 到 了 ， 上 面 的 例子 中 使 用 了 单 引 号 。 只 有 当 字 体 名 中 有 一 个 或 多 个 
空格 (比如 New York) ， 或 者 如 果 字 体 名 包括 # 或 $ 之 类 的 符号 ， 才 需要 在 font- 
family 声明 中 加 引号 。 


单 引 号 或 双 引 号 都 可 以 接受 。 但 是 ， 如 果 把 一 个 font-family 属性 放 在 HTML 的 
style 属性 中 ， 则 需要 使 用 该 属性 本 身 未 使 用 的 那 种 引号 : 


«p style="font-family: Times, TimesNR, 'New Century Schoolbook', Gt 
"New York', serif;">...</p> 


字体 风格 


font-style 属性 最 常用 于 规定 斜体 文本 。 
该 属性 有 三 个 值 : 





e normal- 文本 正常 显示 
。 italic - 文本 斜体 显示 
e oblique - 文本 倾斜 显示 


实例 


p.normal {font-style:normal; } 
p.italic {font-style:italic;} 
p.oblique {font-style:oblique; } 


italic 和 oblique 的 区 别 


font-style 非常 简单 : 用 于 在 normal 文本 、italic 文本 和 oblique 文本 之 间 选 择 。 唯 
一 有 点 复杂 的 是 明确 italic 文本 和 oblique 文本 之 间 的 差别 。 


斜体 (italic) 是 一 种 简单 的 字体 风格 ， 对 每 个 字母 的 结构 有 一 些小 改动 ， 来 反映 变 
化 的 外 观 。 与 此 不 同 ， 倾 斜 (oblique) 文本 则 是 正常 坚 直 文本 的 一 个 倾斜 版 本 。 


通常 情况 下 ，italic 和 oblique 文本 在 web 浏览 器 中 看 上 去 完全 一 样 。 


字体 变形 

font-variant 属性 可 以 设 定 小 型 大 写字 母 。 

小 型 大 写字 母 不 是 一 般 的 大 写字 母 ， 也 不 是 小 写字 母 ， 这 种 字母 采用 不 同 大 小 的 大 
写字 母 。 


实例 


p {font-variant:small-caps; } 


字体 加 粗 


font-weight 属性 设置 文本 的 粗细 。 
使 用 bold 关键 字 可 以 将 文本 设置 为 粗 体 。 


关键 字 100 ~ 900 为 字体 指定 了 9 级 加 粗 度 。 如 果 一 个 字体 内 置 了 这 些 加 粗 级 别 ， 
那么 这 些 数字 就 直接 映射 到 预定 义 的 级 别 ，100 对 应 最 细 的 字体 变形 ，900 对 应 最 
粗 的 字体 变形 。 数 字 400 等 价 于 normal, m 700 等 价 于 bold. 


如 果 将 元 素 的 加 粗 设置 为 bolder， 浏 览 器 会 设置 比 所 继承 值 更 粗 的 一 个 字体 加 粗 。 
与 此 相反 ， 关 键 词 lighter 会 导致 浏览 器 将 加 粗 度 下 移 而 不 是 上 移 。 


实例 


p.normal (font-weight:normal;) 
p.thick {font-weight:bold;} 
p.thicker {font-weight :900; } 


字体 大 小 


font-size 属性 设置 文本 的 大 小 。 


有 能 力 管理 文本 的 大 小 在 web 设计 领域 很 重要 。 但 是 ， 您 不 应 当 通 过 调整 文本 大 小 
使 段落 看 上 去 像 标题 ， 或 者 使 标题 看 上 去 像 段落 。 


请 始终 使 用 正确 的 HTML 标题 ， 比 如 使 用 <h1> - <h6> 来 标记 标题 ， 使 用 <p> 来 
标记 段落 。 


font-size 值 可 以 是 绝对 或 相对 值 。 

绝对 值 : 
e. 将 文本 设置 为 指定 的 大 小 
e 不 允许 用 户 在 所 有 浏览 器 中 改变 文本 大 小 (不 利于 可 用 性 ) 
e 绝对 大 小 在 确定 了 输出 的 物理 尺寸 时 很 有 用 

相对 大 小 : 


e。 相 对 于 周围 的 元 素来 设置 大 小 
e 人 多 许 用 户 在 浏览 器 改变 文本 大 小 


注意 : 如 果 您 没有 规定 字体 大 小 ， 普 通 文本 〈 比 如 段落 ) 的 默认 大 小 是 16 像素 
(16px=1em), 


使 用 像素 来 设置 字体 大 小 
通过 像素 设置 文本 大 小 ， 可 以 对 文本 大 小 进行 完全 控制 : 
实例 


hi {font-size:60px; } 
h2 {font-size:40px; } 
p {font-size:14px;} 


在 Firefox, Chrome, and Safari 中 ， 可 以 重新 调整 以 上 例子 的 文本 大 小 ， 但 是 在 
Internet Explorer 中 不 行 。 


虽然 可 以 通过 浏览 器 的 缩放 工具 调整 文本 大 小 ， 但 是 这 实际 上 是 对 整个 页 面 的 调 
整 ， 而 不 仅 限 于 文本 。 
使 用 em 来 设置 字体 大 小 


如 果 要 避免 在 Internet Explorer 中 无 法 调整 文本 的 问题 ， 许 多 开发 者 使 用 em 单位 
代替 pixels. 


W3C 推荐 使 用 em 尺寸 单位 。 


1em 等 于 当前 的 字体 尺寸 。 如 果 一 个 元 素 的 font-size 为 16 像素 ， 那 么 对 于 该 元 
素 ，1em 就 等 于 16 像素 。 在 设置 字体 大 小 时 ，em 的 值 会 相对 于 父 元 素 的 字体 大 
小 改变 。 


浏览 器 中 默认 的 文本 大 小 是 16 像素 。 因 此 1em 的 默认 尺寸 是 16 像素 。 
可 以 使 用 下 面 这 个 公式 将 像素 转换 为 em : pixels/16=em 
GE : 16 等 于 父 元 素 的 默认 字体 大 小 ， 假 设 父 元 素 的 font-size 为 20px， 那 么 公式 
需 改 为 : pixels/20=em) 
实例 


hi (font-size:3.75em;) /* 60px/16-3.75em */ 
h2 (font-size:2.5em;) /* 40px/16-2.5em */ 
p {font-size:0.875em;} /* 14px/16-0.875em */ 


在 上 面 的 例子 中 ， 以 em 为 单位 的 文本 大 小 与 前 一 个 例子 中 以 像素 计 的 文本 是 相同 
的 。 不 过 ， 如 果 使 用 em 单位 ， 则 可 以 在 所 有 浏览 器 中 调整 文本 大 小 。 
不 幸 的 是 ， 在 IE 中 仍 存在 问题 。 在 重 设 文本 大 小 时 ， 会 比 正常 的 尺寸 更 大 或 更 


小 。 


结合 使 用 百分比 和 EM 


在 所 有 浏览 器 中 均 有 效 的 方案 是 为 body TR 〈 父 元 素 ) 以 百分比 设置 默认 的 font- 
Size 值 : 


实例 


body {font-size:100%; } 
hi {font-size:3.75em; } 
h2 {font-size:2.5em; } 
p {font-size:0.875em; } 


我 们 的 代码 非常 有 效 。 在 所 有 浏览 器 中 ， 可 以 显示 相同 的 文本 大 小 ， 并 人 允许 所 有 浏 
览 器 缩放 文本 的 大 小 。 


CSS 字体 实例 : 
设置 文本 的 字体 


体 的 粗细 
所 有 字体 属性 在 一 个 声明 之 内 


CSS 字体 属性 


属性 描述 
font 简写 属性 。 作 用 是 把 所 有 针对 字体 的 属性 设置 在 一 个 声明 中 。 
font-family 设置 字体 系列 。 
font-size 设置 字体 的 尺寸 。 
E 


font-size- 当 首 选 字体 不 可 用 时 ， 对 替换 字体 进行 智能 缩放 。 (CSS2.1 已 
adjust 删除 该 属性 。) 


font-stretch ”对 字体 进行 水 平 拉 伸 。 (CSS2.1 已 删除 该 属性 。) 
font-style 设置 字体 风格 。 

font-variant ”以 小 型 大 写字 体 或 者 正常 字体 显示 文本 。 
font-weight ”设置 字体 的 粗细 。 


CSS 链接 


我 们 能 够 以 不 同 的 方法 为 链接 设置 样式 。 


设置 链接 的 样式 

能 够 设置 链接 样式 的 CSS 属性 有 很 多 种 (例如 color, font-family, background 等 
T) o 

链接 的 特殊 性 在 于 能 够 根据 它们 所 处 的 状态 来 设置 它们 的 样式 。 

链接 的 四 种 状态 : 

e a:link - 普通 的 、 未 被 访问 的 链接 

e a:visited - 用 户 已 访问 的 链接 


e a:hover - 鼠标 指针 位 于 链接 的 上 方 
e a:active - 链接 被 点 击 的 时 刻 


实例 


a:link {color:#FF0000;} /* 未 被 访问 的 链接 */ 
a:visited {color:#00FFOO;} /* 已 被 访问 的 链接 */ 
a:hover {color:#FFOOFF;} /* 鼠标 指针 移动 到 链接 上 */ 
a:active (color:40000FF;) /* 正在 被 点 击 的 链接 */ 


当 为 链接 的 不 同 状态 设置 样式 时 ， 请 按照 以 下 次 序 规则 : 


e a:hover 必须 位 于 a:link 和 a:visited 之 后 
e a:active 必须 位 于 a:hover 之 后 


常见 的 链接 样式 
在 上 面 的 例子 中 ， 链 接 根据 其 状态 改变 颜色 。 
让 我 们 看 看 其 他 几 种 常见 的 设置 链接 样式 的 方法 : 


文本 修饰 
text-decoration 属性 大 多 用 于 去 掉 链 接 中 的 下 划 线 : 


实例 


a:link {text-decoration: none; } 
a:visited {text-decoration:none; } 
a:hover {text-decoration: underline; } 
a:active {text-decoration: underline; } 


ab E 
AR 


background-color 属性 规定 链接 的 背景 
实例 
头 


a:link {background-color :#B2FF99; } 
a:visited {background-color :#FFFF85; } 
a:hover {background-color :#FF704D; } 
a:active {background-color :#FF704D; } 


更 多 实例 
向 链接 添加 不 同 的 祥 式 
高 级 - 创建 链接 框 


CSS 列表 


CSS 列表 属 BIERKE, 改变 列表 项 标志 ， 或 者 将 图 像 作 为 列表 项 标志 。 


CSS 列表 
从 某 种 意义 上 讲 ， 不 是 描述 性 的 文本 的 任何 内 容 都 可 以 认为 是 列表 。 人 口 普查 、 太 
阳 系 、 家 谱 、 参 观 菜单 ， 甚 至 你 的 所 有 朋友 都 可 以 表示 为 一 个 列表 或 者 是 列表 的 列 


o 


p. em 这 使 得 列表 相当 重要 ， 所 以 说 ，CSS 中 列表 样式 不 太 丰 富 确实 
AKIR 


列表 类 型 
影响 列表 的 样式 ， 最 简单 (同时 支持 最 充分 ) 的 办 法 就 是 改变 其 标志 类 型 。 


例如 ， 在 一 个 无 序列 表 中 ， 列 表 项 的 标志 (marker) 是 出 现在 各 列表 项 旁边 的 圆 点 。 
在 有 序列 表 中 ， 标 志 可 能 是 字母 、 数 字 或 另外 某 种 计数 体系 中 的 一 个 符号 。 


要 修改 用 于 列表 项 的 标志 类 型 ， 可 以 使 用 属性 list-style-type : 


ul {list-style-type : square} 


上 面 的 声明 把 无 序列 表 中 的 列表 项 标志 设置 为 方块 。 


列表 项 图 像 


有 时 ， Lm 你 可 能 想 对 各 标志 使 用 一 个 图 像 ， 这 可 以 利用 list- 
style-image 属性 做 到 


ul li (list-style-image : url(xxx.gif)} 


只 需要 简单 地 使 用 一 个 url() 值 ， 就 可 以 使 用 图 像 作为 标志 。 


列表 标 志 位 置 


CSS2.1 可 以 确定 标志 出 现在 列表 项 内 容 之 外 还 是 内 容 内 部 。 这 是 利用 list-style- 
position 完成 的 。 


简写 列表 样式 


为 简单 起 见 ， 可 以 将 以 上 3 个 列表 样式 属性 合并 为 一 个 方便 的 属性 list-style, ih 
像 这 样 : 


li {list-style : url(example.gif) square inside} 


list-style 的 值 可 以 按 任何 顺序 列 出 ， 而 且 这 些 值 都 可 以 忽略 。 只 要 提供 了 一 个 值 ， 
其 它 的 就 会 填 入 其 默认 值 。 


CSS 列表 实例 : 


在 无 序列 表 中 的 不 同类 型 的 列表 标记 
在 有 序列 表 中 不 同类 型 的 列表 项 标记 
所 有 的 列表 样式 类 型 

将 图 像 作为 列表 项 标记 

放置 列表 标记 

在 一 个 声明 中 定义 所 有 的 列表 属性 


CSS 列表 属性 (list) 
属性 描述 
list-style 简写 属性 。 用 于 把 所 有 用 于 列表 的 属性 设置 于 一 个 声明 中 。 
list-style-image “， 将 图 象 设置 为 列表 项 标志 。 
stelle 设置 列表 中 列表 项 标志 的 位 置 。 
position 
list-style-type 设置 列表 项 标志 的 类 型 。 


marker-offset 


CSS 表格 


CSS 表格 属性 可 以 帮助 您 极 大 地 改善 表格 的 外 观 。 


表格 边框 

如 需 在 CSS 中 设置 表格 边框 ， 请 使 用 border 属性 。 

下 面 的 例子 为 table. th 以 及 设置 了 蓝 色 边框 : 
table, th, td 


{ 
border: 1px solid blue; 
j 


请 注意 ， 上 例 中 的 表格 具有 双 线 条 边框 。 这 是 由 于 table. th 以 及 td 元 素 都 有 独立 
的 边框 。 


如 果 需 要 把 表格 显示 为 单线 条 边框 ， 请 使 用 border-collapse 属性 。 


折 受 边框 
border-collapse 属性 设置 是 否 将 表格 边框 折 受 为 单一 边框 : 


table 


border-collapse:collapse; 


b 
table,th, td 


border: 1px solid black; 


表格 宽度 和 高 度 


通过 width 和 height 属性 定义 表格 的 宽度 和 高 度 。 
下 面 的 例子 将 表格 宽度 设置 为 100%， 同 时 将 th 元 素 的 高 度 设置 为 50px : 


table 


{ 
width:100%; 


th 


{ 
height :50px; 
j 


表格 文本 对 齐 


text-align 和 vertical-align 属性 设置 表格 中 文本 的 对 齐 方式 。 
text-align 属性 设置 水 平 对 齐 方式 ， 比 如 左 对 齐 、 右 对 齐 或 者 居中 : 


td 


text-align:right; 


vertical-align 属性 设置 垂直 对 齐 方式 ， 比 如 顶部 对 齐 、 底 部 对 齐 或 居中 对 齐 : 


td 


{ 
height :50px; 
vertical-align: bottom; 


表格 内 边 距 
如 需 控 制 表格 中 内 容 与 边框 的 距离 ， 请 为 td 和 th 元 素 设 置 padding 属性 : 


td 


{ 
padding:15px; 


表格 颜色 


下 面 的 例子 设置 边框 的 颜色 ， 以 及 th 元 素 的 文本 和 背景 颜色 : 


table, td, th 


border:1px solid green; 


th 


background-color :green; 
color:white; 


} 
CSS Table 属性 

属性 描述 
border-collapse 设置 是 否 把 表格 边框 合并 为 单一 的 边框 。 
border-spacing 设置 分 隔 单 元 格 边 框 的 距离 。 
caption-side 设置 表格 标题 的 位 置 。 
empty-cells 设置 是 否 显示 表格 中 的 空 单元 格 。 
table-layout 设置 显示 单元 、 行 和 列 的 算法 。 


亲 目 试 一 试 - 更 多 实例 


制作 一 个 漂亮 的 表格 
显示 表格 中 的 空 单元 
设置 表格 边框 之 间 的 空白 
设置 表格 标题 的 位 置 


CSS #58 


2s (outline) 是 绘制 于 元 素 周围 的 一 条 线 ， 位 于 边框 边缘 的 外 围 ， 可 起 到 突出 元 
素 的 作用 。 


CSS outline 属性 规定 元 素 轮廓 的 样式 、 颜 色 和 宽度 。 


ER (Outline) 实例 : 
在 元 素 周围 画 线 


&lt; !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ' 
&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 

p 


border:red solid thin; 
outline:#00ff00 dotted thick; 


} 
&lt;/style&gt; 
&lt;/head&gt; 


&lt;body&gt; 
&lt;p&gt;&lt;b&gt;itst: &1lt;/b&gt; 只 有 在 规定 了 !DOCTYPE Hj, Internet E 
&lt;/body&gt; 
&lt;/html&gt; 


doo 网 


设置 轮廓 的 颜色 





&lt; DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ' 
&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 

p 

t 


border:red solid thin; 
outline-style:dotted; 
outline-color:#00ff00; 
} 

&lt;/style&gt; 
&lt;/head&gt; 


&lt;body&gt; 
&lt;p&gt;&lt;b&gt;iEst: &1lt;/b&gt; 只 有 在 规定 了 !DOCTYPE 8j, Internet E 
&lt;/body&gt; 
&lt;/html&gt; 


li s J 
设置 轮廓 的 样式 





&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 

p 

{ 

border: red solid thin; 

} 

p.dotted {outline-style: dotted} 
p.dashed {outline-style: dashed} 
p.solid {outline-style: solid} 
p.double {outline-style: double} 
p.groove {outline-style: groove} 
p.ridge {outline-style: ridge} 
p.inset {outline-style: inset} 
p.outset {outline-style: outset} 
&lt;/style&gt; 

&lt;/head&gt; 

&lt;body&gt; 


&lt;p class="dotted"&gt;A dotted outline&lt;/p&gt; 
&lt;p class-"dashed"&gt;A dashed outline&lt;/p&gt; 
&lt;p class-"solid"&gt;A solid outline&lt;/p&gt; 
&lt;p class-"double"&gt;A double outline&lt;/p&gt; 
&lt;p class="groove"&gt;A groove outline&lt;/p&gt; 
&lt;p class="ridge"&gt;A ridge outline&lt;/p&gt; 
&lt;p class="inset"&gt;An inset outline&lt;/p&gt; 
&lt;p class="outset"&gt;An outset outline&lt;/p&gt; 


&lt;p&gt;&lt;b&gt;itst: &1lt;/b&gt; 只 有 在 规定 了 !DOCTYPE 8j, Internet E 
&lt;/body&gt; 
&lt;/html&gt; 





&lt; !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
p.one 

{ 

border:red solid thin; 
outline-style:solid; 
outline-width:thin; 

} 

p.two 


border:red solid thin; 
outline-style:dotted; 
outline-width: 3px; 


} 
&lt;/style&gt; 
&lt;/head&gt; 
&lt;body&gt; 


&lt;p class="one"&gt;This is some text in a paragraph.&lt;/p&gt; 
&lt;p class-"two"&gt;This is some text in a paragraph.&lt;/p&gt; 


&lt;p&gt;&lt;b&gt; iF : &lt;/b&gt; 只 有 在 规定 了 !DOCTYPE 8j, Internet E 
&lt;/body&gt; 
&lt;/html&gt; 





CSS 边框 属性 


"CSS" 列 中 的 数字 指示 哪个 CSS 版 本 定义 了 该 属性 。 


属性 描述 CSS 
outline 在 一 个 声明 中 设置 所 有 的 轮廓 属性 。 2 
outline-color 设置 轮廓 的 颜色 。 2 
outline-style 设置 轮廓 的 样式 。 2 
outline-width 设置 轮廓 的 宽度 。 2 


CSS 框 模型 


CSS 框 模型 概述 


CSS 框 模型 (Box Model) 规定 了 元 素 框 人 处 理 元 素 内 容 、 内 边 距 、 边 框 和 外 边 距 
的 方式 。 


CSS 框 模型 概述 


border GHE) 


margin ONHE) 


padding (内 边 距 ) 


element 





W3School.com.cn 


元 素 框 的 最 内 部 分 是 实际 的 内 容 ， 直 接 包围 内 容 的 是 内 边 距 。 内 边 距 呈 现 了 元 素 的 
衣 景 。 内 边 距 的 边缘 是 边框 。 边 框 以 外 是 外 边 距 ， 外 边 距 默认 是 透明 的 ， 因 此 不 会 
遮挡 其 后 的 任何 元 素 。 


提示 : 背景 应 用 于 由 内 容 和 内 边 距 、 边 框 组 成 的 区 域 。 
内 边 距 、 边 框 和 外 边 距 都 是 可 选 的， 默认 值 是 需 。 但 是 ， 许 多 元 素 将 由 用 户 代理 样 


式 表 设置 外 边 距 和 内 边 距 。 可 以 通过 将 元 素 的 margin 和 padding 设置 为 需 来 覆盖 
这 些 浏览 器 样式 。 这 可 以 分 别 进行 ， 也 可 以 使 用 通用 选择 器 对 所 有 元 素 进 行 设置 : 


SeN 
margin: 0; 
padding: 0; 


在 CSS rh, width 和 height 指 的 是 内 容 区 域 的 宽度 和 高 度 。 增 加 内 边 距 、 边 框 和 
外 边 距 不 会 影响 内 容 区 域 的 尺寸 ， 但 是 会 增加 元 素 框 的 总 尺寸 。 


假设 框 的 每 个 边 上 有 10 个 像素 的 外 边 距 和 5 个 像素 的 内 边 距 。 如 果 希 望 这 个 元 素 
框 达到 100 个 像素 ， 就 需要 将 内 容 的 宽度 设置 为 70 像素 ， 请 看 下 图 : 








10px 5px 7Opx Spx 10px 

OO 
ee ae OR CR eS -s : 
| | 
| margin: 10px | 
| | 
| | 
| | padding: Spx | 
| | | 
| | | 
| | 
| 

| width: 70px | 
| | 
| | | 
| | | 
| | | 
| | | 
| | | 
| | 
| | 
| | 
et Ph A [ 

100px 
#box { 


width: 70px; 
margin: 10px; 
padding: 5px; 


提示 : 内 边 距 、 边 框 和 外 边 距 可 以 应 用 于 一 个 元 素 的 所 有 边 ， 也 可 以 应 用 于 单独 的 
边 。 


提示 : 外 边 距 可 以 是 负 值 ， 而 且 在 很 多 情况 下 都 要 使 用 负 值 的 外 边 距 。 


浏览 器 兼容 性 


一 旦 为 页 面 设置 了 恰当 的 DTD， 大 多 数 浏览 器 都 会 按照 上 面 的 图 示 来 呈现 内 容 。 然 
而 IE5 和 6 的 呈现 却 是 不 正确 的 。 根 据 W3C 的 规范 ， 元 素 内 容 占据 的 空间 是 由 
width 属性 设置 的 ， 而 内 容 周 围 的 padding 和 border 值 是 另外 计算 的 。 不 幸 的 是 ， 
IE5.X 和 6 在 怪异 模式 中 使 用 自己 的 非 标准 模型 。 这 些 浏览 器 的 width 属性 不 是 内 
容 的 宽度 ， 而 是 内 容 、 内 边 距 和 边框 的 宽度 的 总 和 。 


虽然 有 方法 解决 这 个 问题 。 但 是 目前 最 好 的 解决 方案 是 回避 这 个 问题 。 也 就 是 ， 不 
要 给 元 素 添加 有 具有 指定 宽度 的 内 边 距 ， 而 是 尝试 将 内 边 距 或 外 边 距 添加 到 元 素 的 父 
元 素 和 子 元 素 。 


术语 翻译 


element : 元 素 。 

padding : 内 边 距 ， 也 有 资料 将 其 翻译 为 填充 。 
border : 边框 。 

margin : 外 边 距 ， 也 有 资料 将 其 翻译 为 空白 或 空白 边 。 


在 w3school， 我 们 把 padding 和 margin 统一 地 称 为 内 边 距 和 外 边 距 。 边 框 内 的 空 
白 是 内 边 距 ， 边 框 外 的 空白 是 外 边 距 ， 很 容易 记 吧 : ) 


CSS 内 边 距 


元 素 的 内 边 距 在 边框 和 内 容 区 之 间 。 控 制 该 区 域 最 简单 的 属性 是 padding 属性 。 
CSS padding 属性 定义 元 素 边 框 与 元 素 内 容 之 间 的 空白 区 域 。 


CSS padding 属性 

CSS padding 属性 定义 元 素 的 内 边 距 。padding 属性 接受 长 度 值 或 百分比 值 ， 但 不 
允许 使 用 负 值 。 

例如 ， 如 果 您 希望 所 有 h1 元 素 的 各 边 都 有 10 像素 的 内 边 距 ， 只 需要 这 样 : 


hi (padding: 10px;} 


您 还 可 以 按照 上 、 右 、 下 、 左 的 顺序 分 别 设置 各 边 的 内 边 距 ， 各 边 均 可 以 使 用 不 同 
的 单位 或 百分比 值 : 


hi (padding: 10px 0.25em 2ex 20%;} 


单 边 内 边 距 属性 
也 通过 使 用 下 面 四 个 单独 的 属性 ， 分 别 设置 上 、 右 、 下 、 左 内 边 距 : 


e padding-top 

e padding-right 

e padding-bottom 
e padding-left 


您 也 许 已 经 想到 了 ， 下 面 的 规则 实现 的 效果 与 上 面 的 简写 规则 是 完全 相同 的 : 


hi { 
padding-top: 10px; 
padding-right: 0.25em; 
padding-bottom: 2ex; 
padding-left: 20%; 
} 


内 边 距 的 百分比 数值 


前 面 提 到 过 ， 可 以 为 元 素 的 内 边 距 设置 百分数 值 。 百 分 数值 是 相对 于 其 父 元 素 的 
width 计算 的 ， 这 一 点 与 外 边 距 一 样 。 所 以 ， 如 果 父 元 素 的 width 改变 ， 它 们 也 会 
改变 。 


下 面 这 条 规则 把 段落 的 内 边 距 设 置 为 父 元 素 width 的 10% : 


p {padding: 10%;} 


例如 : 如 果 一 个 段落 的 父 元 素 是 div 元 素 ， 那 么 它 的 内 边 距 要 根据 div 的 width i+ 


o 


«div style="width: 200px;"> 
<p>This paragragh is contained within a DIV that has a width of 20( 
</div> 


o M 


注意 : 上 下 内 边 距 和 与 左右 内 边 中 一 致 ; 即 上 下 内 边 距 的 百分数 会 相对 于 父 元 素 宽 度 
设置 ， 而 不 是 相对 于 高 度 。 





CSS 内 边 距 实例 : 


所 有 内 边 距 属性 在 一 个 声明 中 
设置 下 内 边 距 1 


CSS 内 边 距 属性 
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属性 描述 
padding 简写 属性 。 作 用 是 在 一 个 声明 中 设置 元 素 的 所 内 边 距 属性 。 
padding-bottom ”设置 元 素 的 下 内 边 距 。 
padding-left 设置 元 素 的 左 内 边 距 。 
padding-right 设置 元 素 的 右 内 边 距 。 
padding-top 设置 元 素 的 上 内 边 距 。 
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CSS 边框 


元 素 的 边框 (border) 是 围绕 元 素 内 容 和 内 边 距 的 一 条 或 多 条 
CSS border 属性 允许 你 规定 元 素 边 框 的 样式 、 宽 度 和 颜色 。 


CSS 边框 


在 HTML 中 ， 我 们 使 用 表格 来 创建 文本 周围 的 边框 ， 但 是 通过 使 用 CSS 边框 属 
性 ， 我 们 可 以 创建 出 效果 出 色 的 边框 ， 并 且 可 以 应 用 于 任何 元 素 。 


元 素 外 边 距 内 就 是 元 素 的 的 边框 (border)。 元 素 的 边框 就 是 围绕 元 素 内 容 和 内 边 据 
的 一 条 或 多 条 线 


每 个 边框 有 3 个 方面 : 宽度 、 样 式 ， 以 及 颜色 。 在 下 面 的 篇 幅 ， 我 们 会 为 您 详细 讲 
解 这 三 个 方面 。 
边框 与 背景 


CSS 规范 指出 ， 边 框 绘 制 在 "元素 的 背景 之 上 "。 这 很 重要 ， 因 为 有 些 边 框 是 “间断 
的 ”( 例 如 ， 点 线 边 框 或 虚线 框 )， 元 素 的 背景 应 当 出 现在 边框 的 可 见 部 分 之 间 。 


CSS2 指出 背景 只 延伸 到 内 边 距 ， 而 不 是 边框 。 后 来 CSS2.1 进行 了 更 正 : 元 素 的 
背景 是 内 容 、 ee 大 多 数 浏览 器 都 遵循 CSS2.1 定义 ， 不 过 一 
些 较 老 的 浏览 器 可 能 会 有 不 同 的 表现 。 


边框 的 样式 


样式 是 边框 最 重要 的 一 个 方面 ， 这 不 是 因为 样式 控制 着 边框 的 显示 (当然 ， 样 式 确 
实 控制 着 边框 的 显示 ) ， 而 是 因为 如 果 没 有 样式 ， 将 根本 没有 边框 。 


CSS 的 border-style 属性 定义 了 10 个 不 同 的 非 inherit 样式 ， 包 括 none. 
例如 ， 您 可 以 为 把 一 幅 图 片 的 边框 定义 为 outset， 使 之 看 上 去 像 是 “ 凸 起 按钮 ”: 


a:link img {border-style: outset;} 
定义 多 种 样式 
您 可 以 为 一 个 边框 定义 多 个 样式 ， 例 如 : 


p.aside {border-style: solid dotted dashed double; } 


上 面 这 条 规则 为 类 名 为 aside 的 段落 定义 了 四 种 边框 样式 : 实 线 上 边框 、 点 线 右边 
框 、 虚 线 下 边 杠 和 一 个 双 线 左边 a TE. 


BNA T BHARA 了 top-right-bottom-left 的 顺序 ， 讨 论 用 多 个 值 设置 不 同 
内 边 距 时 也 见 过 这 个 顺序 。 

定义 单 边 样式 

如 果 您 希望 为 元 素 框 的 某 一 个 边 设 置 边框 样式 ， 而 不 是 设置 所 有 4 SNE 
式 ， 可 以 使 用 下 面 的 单 边 边框 样式 属性 : 


e border-top-style 

e border-right-style 
e border-bottom-style 
e border-left-style 


因此 这 两 种 方法 是 等 价 的 : 


p (border-style: solid solid solid none; } 
p {border-style: solid; border-left-style: none; } 


E 如 果 要 使 用 第 二 种 方法 ， 必 须 把 单 边 属性 放 在 简写 属性 之 后 。 因 为 如 果 把 单 
属性 放 在 border-style 之 前 ， 简 罕 属 性 的 值 就 会 覆盖 单 边 值 none, 


边框 的 宽度 


您 可 以 通过 border-width 属性 为 边框 指定 宽度 


为 边框 指定 宽度 有 两 种 方法 : 可 以 指定 长 度 值 ， 比 如 2px 或 0.1em ; 或 者 使 用 3 个 
关键 字 之 一 ， 它 们 分 别 是 thin 、medium (默认 值 ) 和 thick。 


注释 : CSS 没有 定义 3 个 关键 字 的 具体 宽度 ， 所 以 一 个 用 户 代 理 可 能 把 thin 、 
medium 和 thick 分 别 设置 为 等 于 5px、3px 和 2px， 而 另 一 个 用 户 代 理 则 分 别 设置 
A 3px, 2px 和 1px. 


所 以 ， 我 们 可 以 这 样 设置 边框 的 宽度 : 
p {border-style: solid; border-width: 5px; } 
或 者 : 


p {border-style: solid; border-width: thick; } 


EL * UTE 


您 可 以 按照 top-right-bottom-left 的 顺序 设置 元 素 的 各 边 边 框 


p {border-style: solid; border-width: 15px 5px 15px 5px;} 


上 面 的 例子 也 可 以 简写 为 (这 样 写法 称 为 值 复制 ) 


p {border-style: solid; border-width: 15px 5px;} 


您 也 可 以 通过 下 列 属性 分 别 设置 边框 各 边 上 


border-top-width 
border-right-width 
border-bottom-width 
border-left-width 


因此 ， 下 面 的 规则 与 上 面 的 例子 是 等 价 的 : 


度 : 


e 
e 


pt 
border-style: solid; 
border-top-width: 15px; 
border-right-width: 5px; 
border-bottom-width: 15px; 
border-left-width: 5px; 
} 


入 有 边框 


在 前 面 的 例子 中 ， 您 已 经 看 到 ， 如 果 希 望 显 示 某 种 边框 ， 就 必须 设置 边框 样式 ， 比 
如 solid 或 outset。 


那么 如 果 把 border-style 设置 为 none 会 出 现 什 么 情况 


p {border-style: none; border-width: 50px;} 


尽管 边框 的 宽度 是 50px， 但 是 边框 样式 设置 为 none。 在 这 种 情况 下 ， 不 仅 边框 的 
样式 没有 了 ， 其 宽度 也 会 变 成 0。 边 框 消 失 了 ， 为 什么 呢 ? 


这 是 因为 如 果 边 框 样式 为 none， 即 边框 根本 不 存在 ， 那 么 边框 就 不 可 能 有 宽度 ， 
因此 边框 宽度 自动 设置 为 0， 而 不 论 您 原先 定义 的 是 什么 。 


记 住 这 一 点 非常 重要 。 事 实 上 ， ee 根据 以 下 规 
则 ， 所 有 h1 元 素 都 不 会 有 任何 边框 ， 更 不 用 说 20 像素 宽 


hi {border-width: 20px;} 


由 于 border-style 的 默认 值 是 none, WRIRARARHES, RAY F border-style: 
none。 因 此 ， 如 果 您 希望 边框 出 现 ， 就 必须 声明 一 个 边框 样式 。 


边框 的 颜色 


设置 边框 颜色 非常 简单 。CSS 使 用 一 个 简单 的 border-color 属性 ， 它 一 次 可 以 接受 
最 多 4 个 颜色 值 。 


可 以 使 用 任何 类 型 的 颜色 值 ， 例 如 可 以 是 命名 颜色 ， 也 可 以 是 十 六 进 制 和 RGB 
fà: 


pt 
border-style: solid; 
border-color: blue rgb(2596,3596,4596) #909090 red; 


j 


如 果 颜 色 值 小 于 4 个 ， 值 复制 就 会 起 作用 。 例 如 下 面 的 规则 声明 了 段落 的 上 下 边框 
是 蓝 色 ， 左 右边 框 是 红色 : 


pt 
border-style: solid; 
border-color: blue red; 


j 


注释 : 默认 的 边框 颜色 是 元 素 本 身 的 前 景色 。 如 果 没 有 为 边框 声明 颜色 ， 它 将 与 元 
素 的 文本 颜色 相同 。 另 一 方面 ， 如 果 元 素 没有 任何 文本 ， 假 设 它 是 一 个 表格 ， 其 中 
只 包含 图 像 ， 那 么 该 表 的 边框 颜色 就 是 其 父 元 素 的 文本 颜色 (AH color 可 以 继 
承 ) 。 这 个 父 元 素 很 可 能 是 body、div 或 另 一 个 table。 


定义 单 边 颜色 


还 有 一 些 单 边 边框 颜色 属性 。 它 们 的 原理 和 与 单 边 样式 和 宽度 属性 相同 : 


border-top-color 
border-right-color 
border-bottom-color 
border-left-color 


要 为 h1 元 素 指定 实 线 黑色 边框 ， 而 右边 框 为 实 线 红色 ， 可 以 这 样 指定 : 


h1 { 
border-style: solid; 
border-color: black; 
border-right-color: red; 


} 


透明 边框 


2 dt MERAH, MAAR. BABI PAA RS Oz 
一 个 不 可 见 的 边框 。 


CSS2 引入 了 边框 颜色 值 transparent。 这 个 值 用 于 创建 有 宽度 的 不 可 见 边 框 。 请 看 
下 面 的 例子 : 


<a href="#">AAA</a> 
<a href="#">BBB</a> 
<a href="#">CCC</a> 


我 们 为 上 面 的 链接 定义 了 如 下 样式 : 


a:link, a:visited { 
border-style: solid; 
border-width: 5px; 
border-color: transparent; 


a:hover {border-color: gray; } 


如 需 查 看 以 上 样式 的 效果 ， 请 点 击 : 


从 某 种 意义 上 说 ， 利 用 transparent， 使 用 边框 就 像 是 额外 的 内 边 距 一 样 ; 此 外 还 有 
一 个 好 义 ， d Ec mam LEAFA, AAT 
素 的 背景 会 延伸 到 边框 区 域 (如 果 有 可 见 背景 的 话 ) 。 


重要 事项 : 在 IE7 Za, IE/WIN 没有 提供 对 transparent 的 支持 。 在 以 前 的 版 本 ， 
IE 会 根据 元 素 的 color 值 来 设置 边框 颜色 。 


CSS 边框 实例 : 


所 有 边框 属性 在 一 个 声明 之 中 

设置 四 边框 样式 

设置 每 一 边 的 不 同 边框 

所 有 边框 宽度 属性 在 一 个 声明 之 中 
置 四 个 边框 的 颜色 

所 有 下 边框 属性 在 一 个 声明 中 

设置 下 边框 的 颜色 

设置 下 边框 的 样式 

设置 下 边框 的 宽度 
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所 有 左边 框 属性 在 一 个 声明 之 中 
设置 左边 框 的 颜色 
设置 左边 框 的 样式 
设置 左边 框 的 宽度 
所 有 右边 框 属性 在 一 个 声明 之 中 
设置 右边 框 的 颜色 
设置 右边 框 的 样式 
设置 右边 框 的 宽度 
所 有 上 边框 属性 在 一 个 声明 之 中 
设置 上 边框 的 颜色 
设置 上 边框 的 样式 
设置 上 边框 的 宽度 


CSS 边框 属性 


属性 描述 
border 简写 属性 ， 用 于 把 针对 四 个 边 的 属性 设置 在 一 个 声明 。 


border-style 样式 。 


m CSR, AFATRAMANERE TE, RH Motos 
border-width 各 边 边 框 设 置 宽度 。 


简写 属性 ， 设 置 元 素 的 所 有 边框 中 可 见 部 分 的 颜色 ， 或 为 4 
个 边 分 别 设置 颜色 。 


border-bottom ， 简写 属性 ， 用 于 把 下 按 框 的 所 有 属性 设置 到 一 个 声明 中 。 


border-color 


qucm 设置 元 素 的 下 边框 的 颜色 。 
设置 元 素 的 下 边框 的 样式 。 
bottom-width 。， 设置 元 素 的 下 边框 的 宽度 。 
border-left 简写 属性 ， 用 于 把 左边 框 的 所 有 属性 设置 到 一 个 声明 中 。 
bordele ”设置 元 素 的 左边 杠 的 颜色 。 


CSS 边框 


用 于 设置 元 素 所 有 边框 的 样式 ， 或 者 单独 地 为 各 边 设置 边框 
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border-left- 
style 


border-left- 
width 


border-right 


border-right- 
color 


border-right- 
style 


border-right- 
width 


border-top 


border-top- 
color 


border-top- 
style 


border-top- 
width 


CSS 边框 


设置 元 素 的 左边 框 的 样式 。 


置 元 素 的 左边 框 的 宽度 。 


wa 


简写 属性 ， 用 于 把 右边 框 的 所 有 属性 设置 到 一 个 声明 中 。 


`~ 


设置 元 素 的 右边 框 的 颜色 。 


s 


设置 元 素 的 右边 框 的 样式 。 


设置 元 素 的 右边 框 的 宽度 。 


简写 属性 ， 用 于 把 上 边框 的 所 有 属性 设置 到 一 个 声明 中 。 


上 边框 的 颜色 。 


设置 元 素 的 上 边框 的 样式 。 


边框 的 宽度 。 


设置 元 素 的 上 
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CSS 外 边 距 


围绕 在 元 素 边 框 的 空白 区 域 是 外 边 距 。 设 置 外 边 距 会 在 元 素 外 创建 额外 的 “空白 ”。 


设置 外 边 距 的 最 简单 的 方法 就 是 使 用 margin 属性 ， 这 个 属性 接受 任何 长 度 单 位 、 
百分数 值 甚至 负 值 。 


CSS margin 属性 


设置 外 边 距 的 最 简单 的 方法 就 是 使 用 margin 属性 。 
margin 属性 接受 任何 长 度 单位 ， 可 以 是 像素 、 英 寸 、 毫 米 或 em. 


margin 可 以 设置 为 auto。 更 常见 的 做 法 是 为 外 边 距 设置 长 度 值 。 下 面 的 声明 在 h1 
元 素 的 各 个 边 上 设置 了 1/4 英寸 宽 的 空白 : 


hi (margin : 0.25in;} 


RUM h1 元 素 的 四 个 边 分 别 定 义 了 不 同 的 外 边 距 ， 所 使 用 的 长 度 单位 是 像 
3R (px) : 


hi (margin : 10px Opx 15px 5px;} 


与 内 边 距 的 设置 相同 ， 这 些 值 的 顺序 是 从 上 和 外边 距 (top) 开始 围 着 元 素 顺 时 针 旋 转 
的 : 


margin: top right bottom left 


另外 ， 还 可 以 为 margin 设置 一 个 百分比 数值 : 


p {margin : 10%;} 


百分数 是 相对 于 父 元 素 的 width 计算 的 。 上 面 这 个 例子 为 p 元 素 设 置 的 外 边 距 是 
父 元 素 的 width 的 10%。 


margin 的 默认 值 是 0， 所 以 如 果 没 有 为 margin 声明 一 个 值 ， 就 不 会 出 现 外 边 距 。 
但 是 ， 在 实际 中 ， 浏 览 器 对 许多 元 素 已 经 提供 了 预定 的 样式 ， 外 边 距 也 不 例外 。 例 
如 ， 在 支持 CSS 的 浏览 器 中 ， ee re gee 
因此 ， 如 果 没 有 为 p JESRPSBB PL in BB, 浏览 器 可 能 会 自己 应 用 一 个 外 边 距 。 当 然 ， 
只 要 你 特别 作 了 声明 ， 就 会 覆盖 默认 样式 。 


值 复制 


还 记得 吗 ?我 们 鲁 经 在 前 两 节 中 提 到 过 值 复制 。 下 面 我 们 为 您 讲解 如 何 使 用 值 复 
制 


o 


有 时 ， 我 们 会 输入 一 些 重复 的 值 : 


p (margin: 0.5em 1em 0.5em tem; } 


通过 值 复制 ， 您 可 以 不 必 重 复 地 键 人 这 对 数字 。 上 面 的 规则 与 下 面 的 规则 是 等 价 
BY : 


p (margin: 0.5em 1em; } 


这 两 个 值 可 以 取代 前 面 4 个 值 。 这 是 如 何 做 到 的 呢 ? CSS 定义 了 一 些 规 则 ， 人 允许 
为 外 边 距 指定 少 于 4 个 值 。 规 则 如 下 : 
e 如 果 缺 少 左 外 边 距 的 值 ， 则 使 用 右 外 边 距 的 值 。 


e 如 果 缺 少 下 外 边 距 的 值 ， 则 使 用 上 和 外边 距 的 值 。 
e 如 果 缺 少 右 外 边 距 的 值 ， 则 使 用 上 和 外边 距 的 值 。 


下 图 提供 了 更 直观 的 方法 来 了 解 这 一 点 : 





o 
中 


top right bottom 


换 句 话说 ， 如 果 为 外 边 距 指定 了 3 个 值 ， 则 第 4 Ma MEAE) 会 从 第 2 Ma 

( 右 外 边 距 ) 复制 得 到 。 如 果 给 定 了 两 个 值 ， 第 4 个 值 会 从 第 2 个 值 复制 得 到 ， 第 
3 “Ma (FARE) 会 从 第 1 个 值 (上 外边 距 ) 复制 得 到 。 最 后 一 个 情况 ， 如 果 只 
给 定 一 个 值 ， 那 么 其 他 3 个 外 边 距 都 由 这 个 值 (上 外 边 距 ) 复制 得 到 。 


利用 这 个 简单 的 机 制 ， 您 只 需 指定 必要 的 值 ， 而 不 必 全 部 都 应 用 4 个 值 ， 例 如 : 
hi (margin: 0.25em 1em 0.5em;} /* 等 价 于 0.25em 1em 0.5em 1em */ 


h2 (margin: 0.5em 1em;} /* 等 价 于 0.5em 1em 0.5em 1em */ 
p (margin: 1px;) /* 等 价 于 1px 1px 1px 1px */ 


LEN 1" Ll 
这 种 办 法 有 一 个 小 缺点 ， 您 最 后 肯定 会 遇 到 这 个 问题 。 假 设 希 望 把 p 元 素 的 上 外 边 


距 和 左 外 边 距 设置 为 20 像素 ， 下 外 边 距 和 右 外 边 距 设置 为 30 像素 。 在 这 种 情况 
下 ， 必 须 写作 : 


p {margin: 20px 30px 30px 20px;} 


AFEERI AR MINE, ERM, BHrzSARBUT SURE DAR 


再 来 看 另外 一 个 例子 。 如 果 希 望 除了 左 外 边 距 以 外 所 有 其 他 外 边 距 都 是 auto ( 左 外 
边 距 是 20px) : 


p {margin: auto auto auto 20px;} 


[S] EB, BE T 问题 在 于 ， 键 和 这些 auto 有 些 麻 烦 。 如 果 
您 只 是 希望 控制 元 素 单 边 上 的 外 边 距 ， 请 使 用 单 边 外 边 距 属性 。 


单 边 外 边 距 属性 


您 可 以 使 用 单 边 外 边 距 属性 为 元 素 单 边 上 的 外 边 距 设置 值 。 假 设 您 希望 把 p 元 素 的 
左 外 边 距 设置 为 20px。 不 必 使 用 margin (需要 键入 很 多 auto) ， 而 是 可 以 采用 以 
下 方法 : 


p (margin-left: 20px;} 


您 可 以 使 用 下 列 任何 一 个 属性 来 只 设置 相应 上 的 外 边 距 ， 而 不 会 直接 影响 所 有 其 他 
外 边 距 : 

margin-top 

margin-right 

margin-bottom 

margin-left 


一 个 规则 中 可 以 使 用 多 个 这 种 单 边 属性 ， 例 如 


h2 { 
margin-top: 20px; 
margin-right: 30px; 
margin-bottom: 30px; 
margin-left: 20px; 


当然 ， 对 于 这 种 情况 ， 使 用 margin 可 能 更 容易 一 些 : 


p {margin: 20px 30px 30px 20px;} 


不 论 使 用 单 边 属性 还 是 使 用 margin， 得 到 的 结果 都 一 样 。 一 般 来 说 ， 如 果 希 望 为 多 
个 边 设 置 外 边 距 ， 使 用 margin 会 更 容易 一 些 。 不 过 ， 从 文档 显示 的 角度 看 ， 实 际 
上 使 用 哪 种 方法 都 不 重要 ， 所 以 应 该 选择 对 自己 来 说 更 容易 的 一 种 方法 。 


提示 和 注释 


提示 : Netscape #1 IE 对 body 标签 定义 的 默认 边 距 (margin) 值 是 8px。 而 

Opera 不 是 这 样 。 相 反 地 ，Opera 将 内 部 填充 (padding) 的 默认 值 定义 为 8px, 
因此 如 果 希 望 对 整个 网 站 的 边缘 部 分 进行 调整 ， 并 将 之 正确 显示 于 Opera 中 ， 那 么 
必须 对 body 的 padding 进行 自 定义 。 


CSS 外 边 距 实例 : 


设置 文本 的 左 外 边 距 
设置 文本 的 右 外 边 距 
设置 文本 的 上 外 边 距 
设置 文本 的 下 外 边 距 
所 有 的 外 边 距 属性 在 一 个 声明 中 。 


CSS 外 边 距 属性 
属性 描述 
margin 简写 属性 。 在 一 个 声明 中 设置 所 有 外 边 距 属 性 。 
margin-bottom 设置 元 素 的 下 外 边 距 。 
margin-left 设置 元 素 的 左 外 边 距 。 
margin-right 设置 元 素 的 右 外 边 距 。 
margin-top 设置 元 素 的 上 外 边 距 。 


CSS 外 边 距 合并 


外 边 距 合并 指 的 是 ， 当 两 个 垂直 外 边 距 相遇 时 ， 它 们 将 形成 一 个 外 边 距 。 
合并 后 的 外 边 距 的 高 度 等 于 两 个 发 生 合并 的 外 边 距 的 高 度 中 的 较 大 者 。 


外 边 距 合并 
外 边 距 合并 (县 加 ) 是 一 个 相当 简单 的 概念 。 但 是 ， 在 实践 中 对 网 页 进行 布局 时 ， 
它 会 造成 许多 混淆 。 


2: 外 边 距 合 并 指 的 是 ， 当 两 个 垂直 外 边 距 相 遇 时 ， 它 们 将 形成 一 个 外 边 
ER. 后 的 外 边 距 的 高 度 等 于 两 个 发 生 合 并 的 外 边 距 的 高 度 中 的 较 大 者 。 


一 个 元 素 出 现在 另 一 个 元 素 上 面 时 ， 第 一 个 元 素 的 下 外 边 距 与 第 二 个 元 素 的 上 外 
边 距 会 发 生 合并 。 请 看 下 图 : 














合并 之 前 合并 之 后 
| 
| 
| 
| 
内 容 区 域 内 容 区 域 | 
| 
| 
| 
margin-bottom : 20px margin-bottom : 20px | 
bide SF | 
margin-top: 10px FER TP tB | 
内 容 区 域 | 
| 
内 容 区 域 | 
| 











一 个 元 素 包 含 在 另 一 个 元 素 中 时 (假设 没有 内 边 距 或 边框 把 外 边 距 分 隔 开 ) ， 它 
ih ERUS EAR 距 也 会 发 生 合并 。 请 看 下 图 : 


合并 之 前 合并 之 后 








margin-top: 20px margin-top: 20px 
nep 外 边 距 合并 ues eae 
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假设 有 一 个 空 元 素 ， 它 有 外 边 距 ， 但 是 没有 边框 或 
与 下 外 边 距 就 磁 到 了 一 起 ， 它 们 会 发 生 合 并 : 


在 这 种 情况 下 ， 上 外 边 距 


填充 。 


合并 之 前 合并 之 后 





i | 
margin-top: 20px | 


| 





| 
| IHARES | 
| 形成 一 个 外 边 距 7 ' 





如 果 这 个 外 边 距 遇 到 另 一 个 元 素 的 外 边 距 ， 它 还 会 发 生 合并 : 
合并 之 后 


合并 之 前 





| 
margin-top: 20px | 


] 


| 


| 

| 所 有 外 边 距 合并 ， 

| EMNE T t 
| 
| 








margin-top: 20px 





margin-top: 20px 


这 就 是 一 系列 的 段落 元 素 占用 空间 非常 小 的 原因 ， 因 为 它们 的 所 有 外 边 距 都 合并 
它 是 有 意义 的 。 以 由 几 个 段落 组 


一 起 ， 形 成 了 一 个 小 的 外 边 距 。 


| 


外 边 距 合并 初 看 上 去 可 能 有 点 奇怪 ， 但 是 实际 上 ， 

成 的 典型 文本 页 面 为 例 。 第 一 个 段落 上 面 的 空间 等 于 段落 的 上 外 边 距 。 如 果 没 有 外 
边 距 合 并 ， 后 续 所 有 段落 之 间 的 外 边 距 都 将 是 相 邻 上 外 边 距 和 下 外 边 距 的 和 。 这 意 
味 着 段落 之 间 的 空间 是 页 面 顶部 的 两 倍 。 如 果 发 生 外 边 距 合并 ， 段 落 之 间 的 上 外 边 


距 和 下 外 边 距 就 合并 在 一 起 ， 这 样 各 处 的 距离 就 一 致 了 。 
设 有 外 边 距 合并 有 外 边 距 合并 
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段落 之 间 的 外 边 距 与 上 外 边 距 相同 
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注释 : 只 有 普通 文档 流 中 块 框 的 垂直 外 边 距 才 会 发 生 外 边 距 合并 。 行 内 框 


或 绝对 定位 之 间 的 外 边 距 不 会 合并 。 


、 浮 动 框 


CSS 定位 


CSS 定位 (Positioning) 


CSS 定位 (Positioning) 属性 允许 你 对 元 素 进 行 定 位 。 


CSS 定位 和 浮动 


CSS 为 定位 和 浮动 提供 了 一 些 属 性 ， 利 用 这 些 属性 ， 可 以 建立 列 式 布局 ， 将 布局 的 
一 部 分 与 另 一 部 分 重合 ， 还 可 以 完成 多 年 来 通常 需要 使 用 多 个 表格 才能 完成 的 任 
务 。 


定位 的 基本 思想 很 简单 ， 它 允许 你 定义 元 素 框 相对 于 其 正常 位 置 应 该 出 现 的 位 置 ， 
或 者 相对 于 父 元 素 、 另 一 个 元 素 甚至 浏览 器 窗口 本 身 的 位 置 。 显 然 ， 这 个 功能 非常 
强大 ， 也 很 让 人 吃惊 。 要 知道 ， 用 户 代理 对 CSS2 中 定位 的 支持 远 胜 于 对 其 它 方面 
的 支持 ， 对 此 不 应 感到 奇怪 。 


另 一 方面 ，CSS1 中 首次 提出 了 浮动 ， 它 以 Netscape 在 Web 发 展 初期 增加 的 一 个 
功能 为 基础 。 浮 动 不 完全 是 定位 ， 不 过 ， 它 当然 也 不 是 正常 流 布局 。 我 们 会 在 后 面 
的 章节 中 明确 浮动 的 含义 。 


一 切 音 为 杠 


div, h1 或 p 元 素 常 常 被 称 为 块 级 元 素 。 这 意味 着 这 些 元 素 显示 为 一 块 内 容 ， 即 “ 块 
框 ?。 与 之 相反 ，span 和 strong 等 元 素 称 为 “行内 元 素 ”， 这 是 因为 它们 的 内 容 显 示 
在 行 中 ， 即 “行内 框 ”。 


您 可 以 使 用 display 属性 改变 生成 的 框 的 类 型 。 这 意味 着 ， 通 过 将 display 属性 设置 
为 block， 可 以 让 行内 元 素 (比如 «a» WR) 表现 得 像 块 级 元 素 一 样 。 还 可 以 通过 
把 display 设置 为 none， 让 生成 的 元 素 根本 没有 框 。 这 样 的 话 ， 该 框 及 其 所 有 内 容 
就 不 再 显示 ， 不 占用 文档 中 的 空间 。 


但 是 在 一 种 情况 下 ， 即 使 没有 进行 显 式 定义 ， 也 会 创建 块 级 元 素 。 这 种 情况 发 生 在 
把 一 些 文 本 添加 到 一 个 块 级 元 素 (比如 div) 的 开头 。 即 使 没有 把 这 些 文本 定义 为 
入 沙 ， 它 也 会 被 当 作 上 段落 对 待 : 


<div> 

some text 

<p>Some more text.</p> 
</div> 


在 这 种 情况 下 ， 这 个 框 称 为 无 名 块 框 ， 因 为 它 不 与 专门 定义 的 元 素 相 关联 。 


块 级 元 素 的 文本 行 也 会 发 生 类 似 的 情况 。 假 设 有 一 个 包含 三 行文 本 的 段落 。 每 行文 
本 形成 一 个 无 名 框 。 无 法 直接 对 无 名 块 或 行 框 应 用 样式 ， 因 为 没有 可 以 应 用 样式 的 
地 方 (注意 ， 行 框 和 行内 框 是 两 个 概念 ) 。 但 是 ， 这 有 助 于 理解 在 屏幕 上 看 到 的 所 


有 东西 都 形成 某 种 框 。 


CSS 定位 机 制 


CSS 有 三 种 基本 的 定位 机 制 : 普通 流 、 浮 动 和 绝对 定位 。 


除非 专门 指定 ， 否 则 所 有 框 都 在 普通 流 中 定位 。 也 就 是 说 ， 普 通 流 中 的 元 素 的 位 置 
由 元 素 在 (X)HTML 中 的 位 置 决定 。 


块 级 框 从 上 到 下 一 个 接 一 个 地 排列 ， 框 之 间 的 垂直 距离 是 由 框 的 垂直 外 边 距 计算 出 


o 


行内 框 在 一 行 中 水 平 布置 。 可 以 使 用 水 平 内 边 距 、 边 框 和 外 边 距 调整 它们 的 间距 。 
但 是 ， 垂 站内 边 距 、 边 框 和 外 边 距 不 影响 行内 框 的 高 度 。 由 一 行 形成 的 水 平 框 称 为 
行 框 (Line Box) ， 行 框 的 高 度 总 是 足以 容纳 它 包含 的 所 有 行内 框 。 不 过 ， 设 置 行 
高 可 以 增加 这 个 框 的 高 度 。 


在 下 面 的 章节 ， 我 们 会 为 您 详细 讲解 相对 定位 、 绝 对 定位 和 浮动 。 


CSS position 属性 

通过 使 用 position 属性 ， 我 们 可 以 选择 4 种 不 同类 型 的 定位 ， 这 会 影响 元 素 框 生成 
的 方式 。 

position 属性 值 的 含义 : 

static 

relative 

absolute 

fixed 


提示 : 相对 定位 实际 上 被 看 作 普通 流 定位 模型 的 一 部 分 ， 因 为 元 素 的 位 置 相 对 于 它 
在 普通 流 中 的 位 置 。 


实例 
定位 : 相对 定位 
定位 : 绝对 定位 
定位 : 定位 
使 用 固定 值 设 
使 用 百分比 设 


图 像 的 上 边缘 


ia 
置 图 像 的 上 边缘 


W3School Html & Css 教程 


使 用 像素 值 设置 图 像 的 底部 边缘 


使 用 百分比 设 
使 用 固定 值 设 
使 用 百分比 设 


iB 
iB 
iB 
使 用 固定 值 设 置 


图 像 的 底部 边缘 
图 像 的 左边 缘 
图 像 的 左边 缘 
图 像 的 右边 缘 


使 用 百分比 设置 图 像 的 右边 缘 

如 何 使 用 滚动 条 来 显示 元 素 内 浴 出 的 内 容 
如 何 降 藏 浴 出 元 素 中 浴 出 的 内 容 

如 何 设置 浏览 器 来 自动 地 处 理 浴 


设置 元 素 的 形状 
垂直 排列 图 象 
Z-index 


Z-index 


CSS 定位 属性 


CSS 定位 属性 允许 你 对 元 素 进 行 定位 。 


属性 


position 
top 


right 
bottom 
left 
overflow 
clip 


vertical- 
align 


z-index 


描述 


把 元 素 放 置 到 一 个 静态 的 、 相 对 的 、 绝 对 的 、 或 固定 的 位 置 中 。 


定义 了 一 个 定位 元 素 的 上 外 边 距 边界 与 其 包含 块 上 边界 之 间 的 偏 


定义 了 定位 元 素 右 外 边 距 边界 与 其 包含 块 右边 界 之 间 的 偏 移 。 
定义 了 定位 元 素 下 外 边 距 边界 与 其 包含 块 下 边界 之 间 的 偏 移 。 
定义 了 定位 元 素 左 外 边 距 边界 与 其 包含 块 左边 界 之 间 的 偏 移 。 
当 元 素 的 内 容 洽 出 其 区 域 时 发 生 的 事情 。 


~ 


TR 


元 素 的 垂直 对 齐 方式 。 
AETR SE. 


CSS 定位 (Positioning) 


iB 
设置 元 素 的 形状 。 元 素 被 剪 人 这 个 形状 之 中 ， 然 后 显示 出 来 。 
iB 


CSS 相对 定位 


= a i 元 素 仍 然 保持 其 未 定位 前 的 形状 ， 它 原 
本 所 占 的 空 间 仍 保留 


CSS 相对 定位 


相对 定位 是 一 个 非常 容易 掌握 的 概念 。 如 果 对 一 个 元 素 进 行 相对 定位 ， 它 将 出 现在 
它 所 在 的 位 置 上 。 然 后 ， 可 以 通过 设置 垂直 或 水 平 位 置 ， 让 这 个 元 素 “ 相 对 于 ” 它 的 
起 点 进行 移动 。 


如 果 将 top 设置 为 20px， 那 么 框 将 在 原 位 置顶 部 下 面 20 像素 的 地 方 。 如 果 left 设 
BA 30 像素 ， 那 么 会 在 元 素 左 边 创建 30 像素 的 空间 ， 也 就 是 将 元 素 向 右 移 动 。 


#box_relative { 
position: relative; 





left: 30px; 
top: 20px; 
如 下 图 所 示 : 
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注意 ， 在 使 用 相对 定位 时 ， 无 论 是 否 进 行 移动 ， 元 素 仍 然 占据 原来 的 空间 。 因 此 ， 
移动 元 素 会 导致 它 履 盖 其 它 框 。 


CSS 相对 定位 实例 


定位 : 相对 定位 


CSS 绝对 定位 


设置 为 绝对 定位 的 元 素 框 从 文档 流 完 全 删除 ， 并 相对 于 其 包含 块 定位 ， 包 含 块 可 能 
是 文档 中 的 另 一 个 元 素 或 者 是 初始 包含 天。 元 素 原先 在 正常 文档 流 中 所 占 的 空 间 会 
关闭 ， 就 好 像 该 元 素 原 来 不 存在 一 样 。 元 素 定 位 后 生成 一 个 块 级 框 ， 而 不 论 原来 它 
在 正 常 流 中 生成 何 种 类 类 型 的 框 。 


CSS 绝对 定位 


绝对 定位 使 元 素 的 位 置 与 文档 流 无 关 ， 因 此 不 占据 空间 。 这 一 点 与 相对 定位 不 同 ， 
相对 定位 实际 上 被 看 作 普 通 流 定位 模型 的 一 部 分 ， 因 为 元 素 的 位 置 相对 于 它 在 普通 
流 中 的 位 置 。 


普通 流 中 其 它 元 素 的 布局 就 像 绝 对 定位 的 元 素 不 存在 一 


#box_relative { 
position: absolute; 
left: 30px; 
top: 20px; 


如 下 图 所 示 : 
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绝对 定位 的 元 素 的 位 置 相 对 于 最 近 的 已 定位 祖先 元 素 ， 如 果 元 素 没 有 已 定位 的 祖先 
元 素 ， 那 么 它 的 位 置 相对 于 最 初 的 包含 块 。 

对 于 定位 的 主要 问题 是 要 记 住 每 种 定位 的 意义 。 所 以 ， 现 在 让 我 们 复习 一 下 学 过 的 
知识 吧 : 相对 定位 是 “相对 于 ”元 素 在 文档 中 的 初始 位 置 ， 而 绝对 定位 是 “相对 于 "最近 
的 已 定位 祖先 元 素 ， 如 果 不 存 在 已 定位 的 祖先 元 素 ， 那 么 “相对 于 "最初 的 包含 块 。 
注释 : 根据 用 户 代理 的 不 同 ， 最 初 的 包含 块 可 能 是 画布 或 HTML 元 素 。 


提示 : 因为 绝对 定位 的 框 与 文档 流 无 关 ， 所 以 它们 可 以 覆盖 页 面 上 的 其 它 元 素 。 可 
以 通过 设置 z-index 属性 来 控制 这 些 框 的 堆放 次 序 。 


CSS 绝对 定位 实例 


定位 : 绝对 定位 


CSS 浮动 


浮动 的 框 可 以 向 左 或 向 右 移 动 ， 直 到 它 的 外 边缘 碰 到 包含 框 或 另 一 个 浮动 框 的 边框 
为 止 。 

由 于 浮动 框 不 在 文档 的 普通 流 中 ， 所 以 文档 的 普通 流 中 的 块 框 表现 得 就 像 浮动 框 不 
存在 一 祥 。 


CSS 浮动 


请 看 下 图 ， 当 把 框 1 向 右 浮动 时 ， 它 脱离 文档 流 并 且 向 右 移动 ， 直 到 它 的 右边 缘 碰 
到 包含 框 的 右边 缘 : 
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再 请 看 下 图 ， 当 框 1 向 左 浮 动 时 ， 它 脱离 文档 流 并 且 向 左 移动 ， 直 到 它 的 左边 缘 碰 
到 包含 框 的 左边 缘 。 因 为 它 不 再 处 于 文档 流 中 ， 所 以 它 不 占据 空间 ， 实 际 上 覆盖 住 
了 框 2， 使 框 2 从 视图 中 消失 。 


如 果 把 所 有 三 个 框 都 向 左 移动 ， 那 么 框 1 向 左 浮动 直到 碰 到 包含 框 ， 另 外 两 个 框 向 
左 浮动 直到 磁 到 前 一 个 浮动 框 。 
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如 下 图 所 示 ， 如 果 包 含 框 太宗 ， 无 法 容纳 水 平 排列 的 三 个 浮动 元 素 ， 那 么 其 它 浮动 
块 向 下 移动 ， 直 到 有 足够 的 空间 。 如 果 浮动 元 素 的 高 度 不 同 ， 那 么 当 它们 向 下 移动 
时 可 能 被 其 它 浮动 元 素 " 卡 住 " 
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CSS float 属性 


在 CSS 中， 我 们 通过 float 属性 实现 元 素 的 浮动 。 
如 需 更 多 有 关 float 属性 的 知识 ， 请 访问 参考 手册 : CSS float 属性 。 
行 框 和 清理 


浮动 框 旁边 的 行 框 被 缩短 ， 从 而 给 浮动 框 留 出 空间 ， 行 框 围绕 浮动 框 。 
因此 ， 创 建 浮动 框 可 以 使 文本 围绕 图 像 : 


APE Ele EIE PIS 
N 

图 像 图 像 ` 
€. 


x 
行 框 被 缩短 ， 给 浮动 图 像 留 出 空间 


要 想 阻 止 行 框图 绕 浮动 框 ， 需 要 对 该 框 应 用 clear 属性 。clear 属性 的 值 可 以 是 
left, right, both 或 none， 它 表示 框 的 哪些 边 不 应 该 挨 着 浮动 框 。 


为 了 实现 这 种 效果 ， 在 被 清理 的 元 素 的 上 外 边 距 上 添加 足够 的 空间 ， 使 元 素 的 项 边 
缘 垂 直下 降 到 浮动 框 下 面 : 


清理 第 二 个 段落 清理 第 二 个 段落 


图 像 图 像 


ADENA. Fae S dizi 


这 是 一 个 有 用 的 工具 ， 它 让 周围 的 元 素 为 浮动 元 素 留 出 空间 。 


让 我 们 更 详细 地 看 看 浮动 和 清理 。 假 设 希望 让 一 个 图 片 浮动 到 文本 块 的 左边 ， 并 且 
希望 这 幅 图 片 和 文本 包含 在 另 一 个 县 有 背景 产 色 和 边框 的 元 素 中 。 您 可 能 编写 下 面 
的 代码 : 


.news { 
background-color: gray; 
border: solid 1px black; 
} 


.hews img { 
float: left; 
} 


.hews p { 
float: right; 
} 


«div class="news"> 

<img src="news-pic.jpg" /> 
<p>some text</p> 

</div> 


这 种 情况 下 ， 出 现 了 一 个 问题 。 因 为 浮动 元 素 脱离 了 文档 流 ， 所 以 包围 图 片 和 文本 
的 div 不 占据 空间 。 


如 何 让 包围 元 素 在 视觉 上 包围 浮动 元 素 呢 ?需要 在 这 个 元 素 中 的 某 个 地 方 应 用 
clear : 


浮动 元 素 不 占据 空间 进行 清理 的 宝 div 


不 幸 的 是 出 现 了 一 个 新 的 问题 ， 由 于 没有 现 有 的 元 素 可 以 应 用 清 


添加 一 个 空 元 素 并 且 清 理 它 。 


.news { 
background-color: gray; 
border: solid 1px black; 


} 


.hews img { 
float: left; 


} 


.hews p { 
float: right; 
} 


.clear { 
clear: both; 


} 


<div class="news"> 

<img src="news-pic.jpg" /> 
<p>some text</p> 

<div class="clear"></div> 
</div> 


理 ， 


所 以 我 们 只 能 


这 样 可 以 实现 我 们 希望 的 效果 ， 但 是 需要 添加 多 余 的 代码 。 常 常 有 元 素 可 以 应 用 


clear， 但 是 有 时 候 不 得 不 为 了 进行 布局 而 添加 无 意义 的 标记 。 
不 过 我 们 还 有 另 一 种 办 法 ， 那 就 是 对 容器 div 进行 浮动 : 


.news { 
background-color: gray; 
border: solid 1px black; 
float: left; 
} 


.hews img { 
float: left; 
} 


.news p { 
float: right; 
} 
<div class="news"> 
<img src="news-pic.jpg" /> 
<p>some text</p> 
</div> 


这 样 会 得 到 我 们 希望 的 效果 。 不 幸 的 是 ， 下 一 个 元 素 会 受到 这 个 浮动 元 素 的 影响 。 
为 了 解决 这 个 问题 ， 有 些 人 选择 对 布局 中 的 所 有 东西 进行 浮动 ， 然 后 使 用 适当 的 有 
意义 的 元 素 (常常 是 站 点 的 页 脚 ) 对 这 些 浮动 进行 清理 。 这 有 助 于 减少 或 消除 不 必 
要 的 标记 。 

事实 上 ，W3School 站 点 上 的 所 有 页 面 都 采用 了 这 种 技术 ， 如 果 您 打开 我 们 使 用 

CSS 文件 ， 您 会 看 到 我 们 对 页 脚 的 div 进行 了 清理 ， 而 页 脚 上 面 的 三 个 div 都 向 左 
浮动 。 


CSS clear 属性 


我 们 刚才 详细 讨论 了 CSS 清理 的 工作 原理 和 clear 属性 应 用 方法 。 如 果 您 希望 学 习 
更 多 有 关 clear 属性 的 知识 ， 请 访问 参考 手册 : CSS clear 属性 。 


浮动 和 清理 实例 

float 属性 的 简单 应 用 

将 带 有 边框 和 边界 的 图 像 浮动 于 段落 的 右 例 
带 标题 的 图 像 浮动 于 右 侧 

使 段落 的 首 字 母 浮动 于 左 便 

创建 水 平 菜单 

创建 无 表格 的 首页 

清除 元 素 的 侧面 


W3School Html & Css 教程 


CSS 浮动 276 


CSS 选择 页 


CSS TRAIA 


CSS 元 素 选 择 器 
见 的 CSS 选择 器 是 元 素 选 择 器 。 换 句 话 说 ， 文 档 的 元 素 就 是 最 基本 的 选择 


a 


o 


如 果 设 置 HTML 的 样式 ， 选 择 器 通常 将 是 某 个 HTML 元 素 ， 比 如 p. h1, em a, 
甚至 可 以 是 html AS: 


html {color:black; } 
hi {color:blue; } 
h2 {color:silver;} 


可 以 将 某 个 样式 从 一 个 元 素 切 换 到 另 一 个 元 素 。 


ore ee (而 不 是 h1 元 素 ) 设置 为 屎 色 。 只 需要 把 h1 选择 器 
改 为 p 


html {color:black;} 


p {color:gray;} 
h2 (color:silver;) 


类 型 选择 器 


在 W3C 标准 中 ， 元 素 选 择 器 又 称 为 类 型 选择 器 (type selector) 。 

“类 型 选择 器 匹配 文档 语言 元 素 类 型 的 名 称 。 类 型 选择 器 匹配 文档 树 中 该 元 素 类 型 的 
每 一 个 实例 。， 

下 面 的 规则 匹配 文档 树 中 所 有 h1 元 素 : 


hi (font-family: sans-serif; } 


因此 ， 我 们 也 可 以 为 XML 文档 中 的 元 素 设 置 样式 : 


XML 文档 : 


<?xml version="1.0" encoding="ISO-8859-1"?> 
<?xml-stylesheet type="text/css" href="note.css"?> 
<note> 

<to>George</to> 

<from>John</from> 

<heading>Reminder</heading> 

<body>Don't forget the meeting!</body> 

</note> 


CSS 文档 : 


note 


{ 


font-family:Verdana, Arial; 
margin-left:30px; 
} 


to 
{ 


font-size:28px; 
display: block; 
} 


from 


{ 
font-size:28px; 
display: block; 
} 


heading 


{ 


color: red; 
font-size:60px; 
display: block; 
} 


body 


color: blue; 
font-size:35px; 
display: block; 
} 


查看 效果 


通过 上 面 的 例子 ， 您 可 以 看 到 ，CSS 元 素 选择 器 (类 型 选择 器 ) 可 以 设置 XML x 
档 中 元 素 的 样式 。 


如 果 您 需要 更 多 关于 为 XML 文档 添加 样式 的 知识 ， 请 访问 w3school 的 XML AL 


程 。 


CSS 分 组 


选择 磊 分 组 


假设 希望 h2 元 素 和 段落 都 有 灰色 。 为 达到 这 个 目的 ， 最 容易 的 做 法 是 使 用 以 下 声 
明 : 


h2, p {color:gray;} 


将 h2 和 p 选择 器 放 在 规则 左边 ， 然 后 用 逗号 分 隔 ， 就 定义 了 一 个 规则 。 其 右边 的 
样式 (color:gray;) 将 应 用 到 这 两 个 选择 器 所 引用 的 元 素 。 逗 号 告诉 浏览 器 ， 规 则 
中 包含 两 个 不 同 的 选择 器 。 如 果 没 有 这 个 逗号 ， 那 么 规则 的 含义 将 完全 不 同 。 参 见 
后 代 选 择 器 。 


可 以 将 任意 多 个 选择 器 分 组 在 一 起 ， 对 此 没有 任何 限制 。 
例如 ， 如 果 您 想 把 很 多 元 素 显 示 为 色色 ， 可 以 使 用 类 似 如 下 的 规则 : 


body, h2, p, table, th, td, pre, strong, em {color:gray;} 


提示 : 通过 分 组 ， 创 作者 可 以 将 某 些 类 型 的 样式 "压缩 "在 一 起 ， 这 样 就 可 以 得 到 更 
简洁 的 样式 表 。 


以 下 的 两 组 规则 能 得 到 同样 的 结果 ， 不 过 可 以 很 清楚 地 看 出 哪 一 个 写 起 来 更 容易 : 


/* no grouping */ 
hi {color:blue; } 
h2 {color:blue; } 
h3 {color:blue; } 
h4 {color:blue; } 
h5 {color:blue; } 
h6 {color:blue; } 


/* grouping */ 
hi, h2, h3, h4, h5, h6 {color:blue;} 


分 组 提供 了 一 些 有 意思 的 选择 。 例 如 ， 下 例 中 的 所 有 规则 分 组 都 是 等 价 的 ， 每 个 组 
只 是 展示 了 对 选择 器 和 声明 分 组 的 不 同方 法 : 


/* group 1 */ 

h1 {color:silver; background:white; } 
h2 {color:silver; background:gray;} 
h3 {color:white; background:gray;} 
h4 {color:silver; background:white; } 
b {color:gray; background:white; } 


/* group 2 */ 

h1, h2, h4 {color:silver;} 

h2, h3 {background:gray;} 

h1, h4, b {background:white; } 

h3 {color:white;} 

b {color:gray;} 

/* group 3 */ 

hi, h4 {color:silver; background:white; } 
h2 (color:silver;) 

h3 (color:white;) 

h2, h3 (background:gray;) 

b (color:gray; background:white; } 


亲自 试 一 试 


e group 1 
e group 2 
e group 3 


请 注意 ，group 3 中 使 用 了 “声明 分 组 "。 稍 后 我 们 会 介绍 “声明 分 组 ”。 


通 配 从 选择 器 


CSS2 引入 了 一 种 新 的 简单 选择 器 - 通 配 选 择 器 (universal selector) ， 显 示 为 一 
DES (*) 。 该 选择 器 可 以 与 任何 元 素 匹 配 ， 就 像 是 一 个 通配符 。 


例如 ， 下 面 的 规则 可 以 使 文档 中 的 每 个 元 素 都 为 红色 : 


* {color:red; } 


这 个 声明 等 价 于 列 出 了 文档 中 所 有 元 素 的 一 个 分 组 选择 器 。 利 用 通 配 选 择 器 ， 只 需 
敲 一 次 键 ( 仅 一 个 星 号 ) 就 能 使 文档 中 所 有 元 素 的 color 属性 值 指 定 为 red. 


声明 分 组 


我 们 既 可 以 对 选择 器 进行 分 组 ， 也 可 以 对 声明 分 组 。 


假设 您 希望 所 有 h1 元 素 都 有 红色 背景 ， 并 使 用 28 像素 高 的 Verdana 字体 显示 为 
蓝 色 文 本 ， 可 以 写 以 下 样式 : 


hi {font: 28px Verdana; } 
hi (color: blue;} 
hi (background: red;j 


但 是 上 面 这 种 做 法 的 效率 并 不 高 。 尤 其 是 当 我 们 为 一 个 有 多 个 样式 的 元 素 创 建 这 样 
一 个 列表 时 会 很 有 麻烦。 相反， 我 们 可 以 将 声明 分 组 在 一 起 : 


hi (font: 28px Verdana; color: white; background: black;) 


这 和 与 前 面 的 3 行 样 式 表 的 效果 完全 相同 。 


注意 ， 对 声明 分 组 ， 一 定 要 在 各 个 声明 的 最 后 使 用 分 号 ， 这 很 重要 。 浏 览 器 会 忽略 
样式 表 中 的 空白 符 。 只 要 加 了 分 号 ， 就 可 以 之 无 顾忌 地 采用 以 下 格式 建立 样式 : 


h1 { 
font: 28px Verdana; 
color: blue; 
background: red; 


} 


怎么 样 ， 上 面 这 种 写法 的 可 读 性 是 不 是 更 强 。 
不 过 ， 如 果 和 忽略 了 第 二 个 分 号 ， 用 户 代 理 就 会 把 这 个 样式 表 解 释 如 下 : 


h1 { 
font: 28px Verdana; 
color: blue background: red; 


} 


因为 background 对 color 来 说 不 是 一 个 合法 值 ， 而 且 由 于 只 能 为 color 指定 一 个 关 
键 字 ， 所 以 用 户 代理 会 完全 忽略 这 个 color 声明 (包括 background: black 部 分 ) 。 
这 样 h1 标题 只 会 显示 为 蓝 色 ， 而 没有 红色 背景 ， 不 过 更 有 可 能 根本 得 不 到 蓝 色 的 
h1。 相 反 ， 这 些 标题 只 会 显示 为 默认 颜色 (通常 是 黑色 ) ， 而 且 根本 没有 背景 色 。 
font: 28px Verdana 声明 仍 能 正常 发 挥 作用 ， 因 为 它 确实 正确 地 以 一 个 分 号 结尾 。 


与 选择 器 分 组 一 样 ， 声 明 分 组 也 是 一 种 便利 的 方法 ， 可 以 缩短 样式 表 ， 使 之 更 清 
晰 ， 也 更 易 维护 。 


提示 : 在 规则 的 最 后 一 个 声明 后 也 加 上 分 号 是 一 个 好 习惯 。 在 向 规则 增加 另 一 个 声 
明 时 ， 就 不 必 担 心 忘记 再 插入 一 个 分 号 。 


结合 选择 器 和 声明 的 分 组 


我 们 可 以 在 一 个 规则 中 结合 选择 器 分 组 和 声明 分 组 ， 就 可 以 使 用 很 少 的 语句 定义 相 
对 复 灯 的 样式 。 


下 面 的 规则 为 所 有 标题 指定 了 一 种 复杂 的 样式 : 


h1, h2, h3, h4, h5, h6 { 
color:gray; 
background: white; 
padding: 10px; 
border: 1px solid black; 
font-family: Verdana; 


} 


上 面 这 条 规则 将 所 有 标题 的 样式 定义 为 带 有 白色 背景 的 灰色 文本 ， 其 内 边 距 是 10 
像素 ， 并 带 有 1 像素 的 实心 边框 ， 文 本 字体 是 Verdana。 


CSS 类 选择 器 详解 
类 选择 器 允许 以 一 种 独立 于 文档 元 素 的 方式 来 指定 样式 。 


CSS 类 选择 器 
类 选择 器 允许 以 一 种 独立 于 文档 元 素 的 方式 来 指定 样式 。 
该 选择 器 可 以 单独 使 用 ， 也 可 以 与 其 他 元 素 结合 使 用 。 


提示 : 只 有 适当 地 标记 文档 后 ， 才 能 使 用 这 些 选择 器 ， 所 以 使 用 这 两 种 选择 器 通常 
需要 先 做 一 些 构想 和 计划 。 


要 应 用 样式 而 不 考虑 具体 设计 的 元 素 ， 最 常用 的 方法 就 是 使 用 类 选择 器 。 
修改 HTML 代码 


在 使 用 类 选择 器 之 前 ， 需 要 修改 具体 的 文档 标记 ， 以 便 类 选择 器 正常 工作 。 


为 了 将 类 选择 器 的 样式 与 元 素 关联 ， 必 须 将 cass 指定 为 一 个 适当 的 值 。 请 看 下 面 
的 HTML 代码 : 


<hi class="important"> 
This heading is very important. 
«/hi» 


«p class="important"> 


This paragraph is very important. 
</p> 


在 上 面 的 代码 中 ， 两 个 元 素 的 class 都 指定 为 important : 第 一 个 标题 ( h1 元 
素 ) ， 第 二 个 段落 (p 元 素 ) 。 


语法 


然后 我 们 使 用 以 下 语法 向 这 些 刀 类 的 元 素 应 用 样式 ， 即 类 名 前 有 一 个 点 号 〈.) ， 然 
后 结合 通 配 选择 器 : 


*.important {color:red; } 


如 果 您 只 想 选择 所 有 类 名 相同 的 元 素 ， 可 以 在 类 选择 器 中 忽略 通 配 选 择 器 ， 这 没有 
任何 不 好 的 影响 : 


. Important {color:red; } 


A 
A 
例如 ， 您 可 能 希望 只 有 段落 显示 为 红色 文本 : 


p.important (color:red;j 


选择 器 现在 会 匹配 class 属性 包含 important 的 所 有 p 元 素 ， 但 是 其 他 任何 类 型 的 
元 素 都 不 匹配 ， 不 论 是否 有 此 class 属性 。 选 择 器 p.important 解释 为 : "E class 
属性 值 为 important 的 所 有 段落 "。 因为 h1 元 素 不 是 段落 ， 这 个 规则 的 选择 器 与 之 
不 匹配 ， 因 此 h1 元 素 不 会 变 成 红色 文本 。 


如 果 你 确实 希望 为 h1 元 素 指定 不 同 的 样式 ， 可 以 使 用 选择 器 h1.important : 


p.important (color:red;j 
hi.important {color: blue; } 


CSS 多 类 选择 器 


在 上 一 节 中 ， 我 们 处 理 了 class 值 中 包含 一 个 词 的 情况 。 在 HTML 中 ， 一 个 class 
值 中 可 能 包含 一 个 词 列 表 ， 各 个 词 之 间 用 空格 分 隔 。 人 例如， 如果 希 望 将 一 个 特定 的 
元 素 同 时 标记 为 重要 (important) 和 和 警告 (warning) ， 就 可 以 写作 : 


<p class="important warning"> 
This paragraph is a very important warning. 
</p> 


这 两 个 词 的 顺序 无 关 紧 要 ， 写 成 warning important 也 可 以 。 


我 们 假设 class 为 important 的 所 有 元 素 都 是 粗 体 ， 而 class 为 warning 的 所 有 元 
RAPHE, class 中 同时 包含 important 和 warning 的 所 有 元 素 还 有 一 个 银色 的 背景 
。 就 可 以 写作 : 


,. Important {font-weight:bold; } 
.warning {font-style:italic;} 
.important.warning {background:silver; } 


通过 把 两 个 类 选择 器 链接 在 一 起 ， 仅 可 以 选择 同时 包含 这 些 类 名 的 元 素 (类 名 的 顺 
FEBR) 。 


如 果 一 个 多 类 选择 器 包含 类 名 列表 中 没有 的 一 个 类 名 ， 匹 配 就 会 失败 。 请 看 下 面 的 
规则 : 


.important.urgent (background:silver;) 


不 出 所 料 ， 这 个 选择 器 将 只 匹配 class 属性 中 包含 词 important 和 urgent 的 p 元 
素 。 因 此 ， 如 果 一 个 p 元 素 的 class 属性 中 只 有 词 important 和 warning， 将 不 能 
匹配 。 不 过 ， 它 能 匹配 以 下 元 素 : 


<p class="important urgent warning"> 
This paragraph is a very important and urgent warning. 
</p> 


重要 事项 : 在 IE7 之 前 的 版 本 中 ， 不 同 平台 的 Internet Explorer 都 不 能 正确 地 人 处理 
多 类 选择 器 。 


CSS ID 选择 器 详解 


ID 选择 器 允许 以 一 种 独立 于 文档 元 素 的 方式 来 指定 样式 。 


在 某 些 方面 ，ID 选择 器 类 似 于 类 选择 器 ， 不 过 也 有 一 些 重要 差别 。 


语法 
首先 ，ID 选择 器 前 面 有 一 个 # 号 - 也 称 为 棋盘 号 或 井 号 。 
请 看 下 面 的 规则 : 


*#intro {font-weight : bold; } 


与 类 选择 器 一 样 ，ID 选择 器 中 可 以 忽略 通 配 选 择 器 。 前 面 的 例子 也 可 以 写作 : 
#intro {font-weight:bold; } 


这 个 选择 器 的 效果 将 是 一 样 的 。 


第 二 个 区 别 是 ID 选择 器 不 引用 class BHM, Se, CIA id 属性 中 的 
值 。 


以 下 是 一 个 实际 ID 选择 器 的 例子 


<p id="intro">This is a paragraph of introduction.</p> 


类 选择 器 还 是 ID 选择 器 ? 


在 类 选择 器 这 一 章 中 我 们 鲁 讲 解 过 ， 可 以 为 任意 多 个 元 素 指 定 类 。 前 一 章 中 类 名 
important 被 应 用 到 p 和 h1 元 素 ， 而 且 它 还 可 以 应 用 到 更 多 元 素 。 


区 别 1 : 只 能 在 文档 中 使 用 一 次 
与 类 不 同 ， 在 一 个 HTML x fir, ID 选择 器 会 使 用 一 次 ， 而 且 仅 一 次 。 


区 别 2 : 不 能 使 用 ID 词 列 表 


不 同 于 类 选择 器 ，ID 选择 器 不 能 结合 使 用 ， 因 为 ID 属性 不 允许 有 以 空格 分 隔 的 词 
列表 。 

区 别 3 : ID 能 包含 更 多 含义 

类 似 于 类 ， 可 以 独立 于 元 素来 选择 ID。 有 些 情况 下 ， 您 知道 文档 中 会 出 现 某 个 特定 
ID 值 ， 但 是 并 不 知道 它 会 出 现在 哪个 元 素 上 ， 所 以 您 想 声 明 独 立 的 ID 选择 器 。 例 
如 ， 您 可 能 知道 在 一 个 给 定 的 文档 中 会 有 一 个 ID A mostlmportant 的 元 素 。 您 

不 知道 这 个 最 重要 的 东西 是 一 个 段落 、 一 个 短语 、 一 个 列表 项 还 是 一 个 小 节 标 题 。 


您 只 知道 每 个 文档 都 会 有 这 么 一 个 最 重要 的 内 容 ， 它 可 能 在 任何 元 素 中 ， 而 且 只 能 
出 现 一 个 。 在 这 种 情况 下 ， 可 以 编写 如 下 规则 : 


#mostImportant {color:red; background: yellow; } 


这 个 规则 会 与 以 下 各 个 元 素 匹 配 (这 些 元 素 不 能 在 同一 个 文档 中 同时 出 现 ， 因 为 它 
们 都 有 相同 的 ID 值 ) : 


«hi id="mostImportant">This is important!</h1> 
«em id="mostImportant">This is important !</em> 
<ul id="mostImportant">This is important!</ul> 


亲自 试 一 试 : 
e 为 id 为 mostlmportant 的 h1 元 素 设 定 样式 


e 为 id 为 mostlmportant 的 em 元 素 设 定 祥 式 
e 为 id 为 mostlmportant 的 ul 元 素 设 定 样式 


区 分 大 小 写 
请 注意 ， 类 选择 器 和 [D 选择 器 可 能 是 区 分 大 小 写 的 。 这 取决 于 文档 的 语言 。HTML 


和 XHTML 将 类 和 ID 值 定义 为 区 分 大 小 写 ， 所 以 类 和 ID 值 的 大 小 写 必 须 与 文档 中 
的 相应 值 匹 配 。 


因此 ， 对 于 以 下 的 CSS 和 HTML， 元 素 不 会 变 成 粗 体 : 


#intro {font-weight:bold; } 


<p id="Intro">This is a paragraph of introduction.</p> 


由 于 字母 i 的 大 小 写 不 同 ， 所 以 选择 器 不 会 匹配 上 面 的 元 素 。 


CSS 属性 选择 器 详解 

CSS 2 引入 了 属性 选择 器 。 

属性 选择 器 可 以 根据 元 素 的 属性 及 属性 值 来 选择 元 素 。 
简单 属性 选择 


如 果 希 望 选择 有 某 个 属性 的 元 素 ， 而 不 论 属性 值 是 什么 ， 可 以 使 用 简单 属性 选择 
Zire 


例子 1 
如 果 您 希望 把 包含 标题 (tite) 的 所 有 元 素 变 为 红色 ， 可 以 写作 : 


*[title] {color:red;} 


例子 2 
与 上 面 类 似 ， 可 以 只 对 有 href 属性 的 锚 (a 元 素 ) 应 用 样式 : 


a[href] {color:red;} 


例子 3 
还 可 以 根据 多 个 属性 进行 选择 ， 只 需 将 属性 选择 器 链接 在 一 起 即 可 。 


例如 ， 为 了 将 同时 有 href 和 title 属性 的 HTML 超 链 接 的 文本 设置 为 红色 ， 可 以 这 
Hm: 


a[href][title] {color:red;} 


例子 4 
可 以 采用 一 些 创造 性 的 方法 使 用 这 个 特性 。 
例如 ， 可 以 对 所 有 带 有 alt 属性 的 图 像 应 用 样式 ， 从 而 突出 显示 这 些 有 效 的 图 像 : 


img[alt] {border: 5px solid red;) 


提示 : 上 面 这 个 特例 更 适合 用 来 诊断 而 不 是 设计 ， 即 用 来 确定 图 像 是 否 确实 有 效 。 


例子 5 : 为 XML 文档 使 用 属性 选择 器 


属性 选择 器 在 XML 文档 中 相当 有 用 ， 因 为 XML 语言 主张 要 针对 元 素 和 属性 的 用 途 
指定 元 素 名 和 属性 名 。 


假设 我 们 为 描述 太阳 系 行星 设计 了 一 个 XML 文档 。 如 果 我 们 想 选 择 有 moons 属性 
的 所 有 planet 元 素 ， 使 之 显示 为 红色 ， 以 便 能 更 关注 有 moons 的 行星 ， 就 可 以 这 
HE: 


planet[moons] {color:red; } 


这 会 让 以 下 标记 片段 中 的 第 二 个 和 第 三 个 元 素 的 文本 显示 为 红色 ， 但 第 一 个 元 素 的 
文本 不 是 红色 : 


<planet>Venus</planet> 
«planet moons="1">Earth</planet> 
<planet moons="2">Mars</planet> 


查看 效果 


根据 具体 属性 值 选择 


除了 选择 拥有 某 些 属性 的 元 素 ， 还 可 以 进一步 缩小 选择 范围 ， 只 选择 有 特定 属性 值 
的 元 素 。 
例子 1 


例如 ， 假 设 希 望 将 指向 Web 服务 器 上 某 个 指定 文档 的 超 链 接 变 成 红色 ， 可 以 这 样 
写 : 


a[hrefz"http://www.w3school.com.cn/about us.asp"] (color: red; } 


例子 2 

与 简单 属性 选择 器 类 似 ， 可 以 把 多 个 属性 - 值 选 择 器 链接 在 一 起 来 选择 一 个 文档 。 
a[hrefz"http://www.w3school.com.cn/"][title-"w3School"] (color: rec 

E = 


m 











这 会 把 以 下 标记 中 的 第 一 个 超 链接 的 文本 变 为 红色 ， 但 是 第 二 个 或 第 三 个 链接 不 受 


影响 : 


«a href="http://www.w3school.com.cn/" title="W3School">w3School</a: 
«a href="http://www.w3school.com.cn/css/" title="CSS">CSS</a> 
«a hrefz'http://www.w3school.com.cn/html/" title="HTML">HTML</a> 





‘ 
例子 3 


同样 地 ，XML 语言 也 可 以 利用 这 种 方法 来 设置 样式 。 


下 面 我 们 再 回 到 行星 那个 例子 中 。 假 设 只 希望 选择 moons 属性 值 为 1 的 那些 
planet 元 素 : 





planet[moons="1"] {color: red;} 


上 面 的 代码 会 把 以 下 标记 中 的 第 二 个 元 素 变 成 红色 ， 但 第 一 个 和 第 三 个 元 素 不 受 影 
"f : 


<planet>Venus</planet> 
<planet moons="1">Earth</planet> 
<planet moons="2">Mars</planet> 


查看 效果 


属性 与 属性 值 必须 完全 匹配 
请 注意 ， 这 种 格式 要 求 必 须 与 属性 值 完全 匹配 。 
如 果 属 性 值 包含 用 空格 分 隔 的 值 列表 ， 匹 配 就 可 能 出 问题 。 
请 考虑 一 下 的 标记 片段 : 
<p class="important warning"»This paragraph is a very important wai 
1 
如 果 写 成 p[class="important"]， 那 么 这 个 规则 不 能 匹配 示例 标记 。 
要 根据 具体 属性 值 来 选择 该 元 素 ， 必 须 这 样 写 : 





p[class="important warning"] {color: red;} 


根据 部 分 属性 值 选 择 

如 果 需 要 根据 属性 值 中 的 词 列表 的 某 个 词 进行 选择 ， 则 需要 使 用 波浪 号 (~) 。 

假设 您 想 选 择 class 属性 中 包含 important 的 元 素 ， 可 以 用 下 面 这 个 选择 器 做 到 这 
= 


p[class~="important"] {color: red;} 


如 果 忽 略 了 波浪 号 ， 则 说 明 需 要 完成 完全 值 匹 配 。 


部 分 值 属性 选择 器 与 点 号 类 名 记 法 的 区 别 
该 选择 器 等 价 于 我 们 在 类 选择 器 中 讨论 过 的 点 号 记 法 。 
也 就 是 说 ，p.important 和 p[class="important"] 应 用 到 HTML 文档 时 是 等 价 的 。 


那么 ， 为 什么 还 要 有 "~=" 属性 选择 器 呢 ? 因为 它 能 用 于 任何 属性 ， 而 不 只 是 
class. 


例如 ， 可 以 有 一 个 包含 大 量 图 像 的 文档 ， 其 中 


中 只 有 一 部 分 是 图 片 。 对 此 ， 可 以 使 用 
一 个 基于 title 文档 的 部 分 属性 选择 器 ， 只 选择 这 些 


只 
择 这 些 图 片 
img[title--"Figure"] (border: 1px solid gray;} 


这 个 规则 会 选择 title 文本 包含 "Figure" 的 所 有 图 像 。 没 有 title 属性 或 者 title 属性 
中 不 包含 "Figure" 的 图 像 都 不 会 匹配 。 


子 串 匹 配属 性 选择 器 


下 面 为 您 介绍 一 个 更 高 级 的 选择 器 模块 ， 它 是 CSS2 完成 之 后 发 布 的 ， 其 中 包含 了 
更 多 的 部 分 值 属性 选择 器 。 按 照 规范 的 说 法 ， 应 该 称 之 为 " 子 串 匹配 属性 选择 器 "。 


很 多 现代 浏览 器 都 支持 这 些 选 择 器 ， 包 括 ET. 
下 表 是 对 这 些 选择 器 的 简单 总 结 : 


类 型 描述 
[abc^="def"] 选择 abc 属性 值 以 "def" 开头 的 所 有 元 素 
[abc$="def"] 选择 abc 属性 值 以 "def" 结尾 的 所 有 元 素 
[abc*="def"] 选择 abc 属性 值 中 包含 子 串 "def" 的 所 有 元 素 


可 以 想到 ， 这 些 选择 有 很 多 用 途 。 


PS, RAE W3School 的 所 有 链接 应 用 样式 ， 不 必 为 所 有 这 些 链接 
指定 class， 再 根据 这 个 类 编写 样式 ， 而 只 需 编写 以 下 规则 : 


a[href*="w3school.com.cn"] {color: red;} 
提示 : 任何 属性 都 可 以 使 用 这 些 选 择 器 。 

特定 属性 选择 类 型 

最 后 为 您 介绍 特定 属性 选择 器 。 请 看 下 面 的 例子 


*[lang|="en"] (color: red;) 


上 面 这 个 规则 会 选择 lang 属性 等 于 en 或 以 en- 开头 的 所 有 元 素 。 因 此 ， 以 下 示例 
标记 中 的 前 三 个 元 素 将 被 选中 ， 而 不 会 选择 后 两 个 元 素 : 


<p lang="en">Hello!</p> 

<p lang="en-us">Greetings!</p> 
<p lang="en-au">G'day!</p> 

<p lang="fr">Bonjour!</p> 

<p lang="cy-en">Jrooana! </p> 


一 般 来 说 ，[att|="val"] 可 以 用 于 任何 属性 及 其 值 。 

假设 一 个 HTML 文档 中 有 一 系列 图 片 ， 其 中 每 个 图 片 的 文件 名 都 形 如 figure-1.jpg 

和 figure-2.jpg。 就 可 以 使 用 以 下 选择 器 匹配 所 有 这 些 图 像 : 
img[src|="figure"] (border: 1px solid gray;} 


当然 ， 这 种 属性 选择 器 最 常见 的 用 途 还 是 匹配 语言 值 。 
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选择 器 描述 
[attribute] 用 于 选取 带 有 指定 属性 的 元 素 。 


[attribute-value] 用 于 选取 带 有 指定 属性 和 值 的 元 素 。 
[attribute~=value] ”用 于 选取 属性 值 中 包含 指定 词汇 的 元 素 。 
用 于 选取 带 有 以 指定 值 开头 的 属性 值 的 元 素 ， 该 值 必须 是 


ED 

[attribute^-value] ”匹配 属性 值 以 指定 值 开 头 的 每 个 元 素 。 
[attribute$=value] ”匹配 属性 值 以 指定 值 结尾 的 每 个 元 素 。 
[attribute*=value] ”匹配 属性 值 中 包含 指定 值 的 每 个 元 素 。 


[attribute|-value] 


CSS 属性 选择 器 详解 295 


CSS Aft 1t28 


后 代 选 择 器 (descendant selector) 又 称 为 包含 选择 器 。 
后 代 选 择 器 可 以 选择 作为 某 元 素 后 代 的 元 素 。 


根据 上 下 文选 择 元 素 


我 们 可 以 定义 后 代 选 择 器 来 创建 一 些 规则 ， 使 这 些 规则 在 某 些 文档 结构 中 起 作用 ， 
而 在 另外 一 些 结构 中 不 起 作用 。 


举例 来 涪 ， 如 果 您 希望 只 对 h1 元 素 中 的 em 元 素 应 用 样式 ， 可 以 这 样 写 : 


hi em {color:red; } 


上 面 这 个 规则 会 把 作为 h1 元 素 后 代 的 em 元 素 的 文本 变 为 红色 。 其 他 em MA 
(如 段落 或 块 引 用 中 的 em) 则 不 会 被 这 个 规则 选中 : 


<hi>This is a <em>important</em> heading</h1> 
<p>This is a <em>important</em> paragraph.</p> 


当然 ， 您 也 可 以 在 h1 中 找到 的 每 个 em 元 素 上 放 一 个 class 属性 ， 但 是 显然 ， 后 
代 选 择 器 的 效率 更 高 。 


语法 解释 

在 后 代 选 择 器 中 ， 规 则 左边 的 选择 器 一 端 包括 两 个 或 多 个 用 空格 分 隔 的 选择 器 。 选 
择 器 之 间 的 空格 是 一 种 结合 符 (combinator) 。 每 个 空格 结合 符 可 以 解释 为 “.…. 在 
… 找到 ”“.… 作为 … 的 一 部 分 ul 作为 … 的 后 代 ”， 但 是 要 求 必 须 从 右 向 左 读 选 
择 器 。 

因此 ，h1 em 选择 器 可 以 解释 为 “作为 h1 元 素 后 代 的 任何 em 元 素 ”。 如 果 要 从 左 
向 右 读 选择 器 ， 可 以 换 成 以 下 说 法 :“ 包 含 em 的 所 有 hi 会 把 以 下 样式 应 用 到 该 
em", 


具体 应 用 


后 代 选 择 器 的 功能 极其 强大 。 有 了 它 ， 可 以 使 HTML 中 不 可 能 实现 的 任务 成 为 可 
Lat, 
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假设 有 一 个 文档 ， 其 中 有 一 个 边栏 ， 还 有 一 个 主 区 。 边 栏 的 背景 为 蓝 色 ， 主 区 的 背 
景 为 白色 ， 这 两 个 区 都 包含 链接 列表 。 不 能 把 所 有 链接 都 设置 为 蓝 色 ， 因 为 这 样 一 
来 边栏 中 的 蓝 色 链接 都 无 法 看 到 。 


解决 方法 是 使 用 后 代 选 择 器 。 在 这 种 情况 下 ， 可 以 为 包含 边栏 的 div 指定 值 为 
sidebar 的 class 属性 ， 并 把 主 区 的 class 属性 值 设置 为 maincontent。 然 后 编写 以 
TEX: 


div.sidebar ([background:blue;) 
div.maincontent {background:white; } 
div.sidebar a:link {color:white; } 
div.maincontent a:link (color:blue;) 


有 关 后 代 选 择 器 有 一 个 易 被 忽视 的 方面 ， 即 两 个 元 素 之 间 的 层次 间隔 可 以 是 无 限 
的 。 


例如 ， 如 果 写 作 ul em， 这 个 语法 就 会 选择 从 ul 元 素 继承 的 所 有 em 元 素 ， 而 不 论 
em BRE Z RB Ro 
会 


因此 ，ul em 将 会 选择 以 下 标记 中 的 所 有 em 7538 : 


<ul> 
«li»List item 1 
«ol» 
<li>List item 1-1«/li» 
<li>List item 1-2«/li» 
«li»List item 1-3 
«ol» 
<li>List item 1-3-1«/li» 
<li>List item «em»1-3-2«/em»«/li» 
<li>List item 1-3-3«/li» 
«/ol» 
</li> 
<li>List item 1-4</li> 
</ol> 
</li> 


<li>List item 2</li> 
<li>List item 3</li> 
</ul> 


CSS 属性 选择 器 详解 

CSS 2 引入 了 属性 选择 器 。 

属性 选择 器 可 以 根据 元 素 的 属性 及 属性 值 来 选择 元 素 。 
简单 属性 选择 


如 果 希 望 选择 有 某 个 属性 的 元 素 ， 而 不 论 属性 值 是 什么 ， 可 以 使 用 简单 属性 选择 
Zire 


例子 1 
如 果 您 希望 把 包含 标题 (tite) 的 所 有 元 素 变 为 红色 ， 可 以 写作 : 


*[title] {color:red;} 


例子 2 
与 上 面 类 似 ， 可 以 只 对 有 href 属性 的 锚 (a 元 素 ) 应 用 样式 : 


a[href] {color:red;} 


例子 3 
还 可 以 根据 多 个 属性 进行 选择 ， 只 需 将 属性 选择 器 链接 在 一 起 即 可 。 


例如 ， 为 了 将 同时 有 href 和 title 属性 的 HTML 超 链 接 的 文本 设置 为 红色 ， 可 以 这 
Hm: 


a[href][title] {color:red;} 


例子 4 
可 以 采用 一 些 创造 性 的 方法 使 用 这 个 特性 。 
例如 ， 可 以 对 所 有 带 有 alt 属性 的 图 像 应 用 样式 ， 从 而 突出 显示 这 些 有 效 的 图 像 : 


img[alt] {border: 5px solid red;) 


提示 : 上 面 这 个 特例 更 适合 用 来 诊断 而 不 是 设计 ， 即 用 来 确定 图 像 是 否 确实 有 效 。 


例子 5 : 为 XML 文档 使 用 属性 选择 器 


属性 选择 器 在 XML 文档 中 相当 有 用 ， 因 为 XML 语言 主张 要 针对 元 素 和 属性 的 用 途 
指定 元 素 名 和 属性 名 。 


假设 我 们 为 描述 太阳 系 行星 设计 了 一 个 XML 文档 。 如 果 我 们 想 选 择 有 moons 属性 
的 所 有 planet 元 素 ， 使 之 显示 为 红色 ， 以 便 能 更 关注 有 moons 的 行星 ， 就 可 以 这 
HE: 


planet[moons] {color:red; } 


这 会 让 以 下 标记 片段 中 的 第 二 个 和 第 三 个 元 素 的 文本 显示 为 红色 ， 但 第 一 个 元 素 的 
文本 不 是 红色 : 


<planet>Venus</planet> 
«planet moons="1">Earth</planet> 
<planet moons="2">Mars</planet> 


查看 效果 


根据 具体 属性 值 选择 


除了 选择 拥有 某 些 属性 的 元 素 ， 还 可 以 进一步 缩小 选择 范围 ， 只 选择 有 特定 属性 值 
的 元 素 。 
例子 1 


例如 ， 假 设 希 望 将 指向 Web 服务 器 上 某 个 指定 文档 的 超 链 接 变 成 红色 ， 可 以 这 样 
写 : 


a[hrefz"http://www.w3school.com.cn/about us.asp"] (color: red; } 


例子 2 

与 简单 属性 选择 器 类 似 ， 可 以 把 多 个 属性 - 值 选 择 器 链接 在 一 起 来 选择 一 个 文档 。 
a[hrefz"http://www.w3school.com.cn/"][title-"w3School"] (color: rec 
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这 会 把 以 下 标记 中 的 第 一 个 超 链接 的 文本 变 为 红色 ， 但 是 第 二 个 或 第 三 个 链接 不 受 


影响 : 


«a href="http://www.w3school.com.cn/" title="W3School">w3School</a: 
«a href="http://www.w3school.com.cn/css/" title="CSS">CSS</a> 
«a hrefz'http://www.w3school.com.cn/html/" title="HTML">HTML</a> 





‘ 
例子 3 


同样 地 ，XML 语言 也 可 以 利用 这 种 方法 来 设置 样式 。 


下 面 我 们 再 回 到 行星 那个 例子 中 。 假 设 只 希望 选择 moons 属性 值 为 1 的 那些 
planet 元 素 : 





planet[moons="1"] {color: red;} 


上 面 的 代码 会 把 以 下 标记 中 的 第 二 个 元 素 变 成 红色 ， 但 第 一 个 和 第 三 个 元 素 不 受 影 
"f : 


<planet>Venus</planet> 
<planet moons="1">Earth</planet> 
<planet moons="2">Mars</planet> 


查看 效果 


属性 与 属性 值 必须 完全 匹配 
请 注意 ， 这 种 格式 要 求 必 须 与 属性 值 完全 匹配 。 
如 果 属 性 值 包含 用 空格 分 隔 的 值 列表 ， 匹 配 就 可 能 出 问题 。 
请 考虑 一 下 的 标记 片段 : 
<p class="important warning"»This paragraph is a very important wai 
1 
如 果 写 成 p[class="important"]， 那 么 这 个 规则 不 能 匹配 示例 标记 。 
要 根据 具体 属性 值 来 选择 该 元 素 ， 必 须 这 样 写 : 





p[class="important warning"] {color: red;} 


根据 部 分 属性 值 选 择 

如 果 需 要 根据 属性 值 中 的 词 列表 的 某 个 词 进行 选择 ， 则 需要 使 用 波浪 号 (~) 。 

假设 您 想 选 择 class 属性 中 包含 important 的 元 素 ， 可 以 用 下 面 这 个 选择 器 做 到 这 
= 


p[class~="important"] {color: red;} 


如 果 忽 略 了 波浪 号 ， 则 说 明 需 要 完成 完全 值 匹 配 。 


部 分 值 属性 选择 器 与 点 号 类 名 记 法 的 区 别 
该 选择 器 等 价 于 我 们 在 类 选择 器 中 讨论 过 的 点 号 记 法 。 
也 就 是 说 ，p.important 和 p[class="important"] 应 用 到 HTML 文档 时 是 等 价 的 。 


那么 ， 为 什么 还 要 有 "~=" 属性 选择 器 呢 ? 因为 它 能 用 于 任何 属性 ， 而 不 只 是 
class. 


例如 ， 可 以 有 一 个 包含 大 量 图 像 的 文档 ， 其 中 


中 只 有 一 部 分 是 图 片 。 对 此 ， 可 以 使 用 
一 个 基于 title 文档 的 部 分 属性 选择 器 ， 只 选择 这 些 


只 
择 这 些 图 片 
img[title--"Figure"] (border: 1px solid gray;} 


这 个 规则 会 选择 title 文本 包含 "Figure" 的 所 有 图 像 。 没 有 title 属性 或 者 title 属性 
中 不 包含 "Figure" 的 图 像 都 不 会 匹配 。 


子 串 匹 配属 性 选择 器 


下 面 为 您 介绍 一 个 更 高 级 的 选择 器 模块 ， 它 是 CSS2 完成 之 后 发 布 的 ， 其 中 包含 了 
更 多 的 部 分 值 属性 选择 器 。 按 照 规范 的 说 法 ， 应 该 称 之 为 " 子 串 匹配 属性 选择 器 "。 


很 多 现代 浏览 器 都 支持 这 些 选 择 器 ， 包 括 ET. 
下 表 是 对 这 些 选择 器 的 简单 总 结 : 


类 型 描述 
[abc^="def"] 选择 abc 属性 值 以 "def" 开头 的 所 有 元 素 
[abc$="def"] 选择 abc 属性 值 以 "def" 结尾 的 所 有 元 素 
[abc*="def"] 选择 abc 属性 值 中 包含 子 串 "def" 的 所 有 元 素 


可 以 想到 ， 这 些 选择 有 很 多 用 途 。 


PS, RAE W3School 的 所 有 链接 应 用 样式 ， 不 必 为 所 有 这 些 链接 
指定 class， 再 根据 这 个 类 编写 样式 ， 而 只 需 编写 以 下 规则 : 


a[href*="w3school.com.cn"] {color: red;} 
提示 : 任何 属性 都 可 以 使 用 这 些 选 择 器 。 

特定 属性 选择 类 型 

最 后 为 您 介绍 特定 属性 选择 器 。 请 看 下 面 的 例子 


*[lang|="en"] (color: red;) 


上 面 这 个 规则 会 选择 lang 属性 等 于 en 或 以 en- 开头 的 所 有 元 素 。 因 此 ， 以 下 示例 
标记 中 的 前 三 个 元 素 将 被 选中 ， 而 不 会 选择 后 两 个 元 素 : 


<p lang="en">Hello!</p> 

<p lang="en-us">Greetings!</p> 
<p lang="en-au">G'day!</p> 

<p lang="fr">Bonjour!</p> 

<p lang="cy-en">Jrooana! </p> 


一 般 来 说 ，[att|="val"] 可 以 用 于 任何 属性 及 其 值 。 

假设 一 个 HTML 文档 中 有 一 系列 图 片 ， 其 中 每 个 图 片 的 文件 名 都 形 如 figure-1.jpg 

和 figure-2.jpg。 就 可 以 使 用 以 下 选择 器 匹配 所 有 这 些 图 像 : 
img[src|="figure"] (border: 1px solid gray;} 


当然 ， 这 种 属性 选择 器 最 常见 的 用 途 还 是 匹配 语言 值 。 
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ideas 
[attribute] 
[attribute=value] 


[attribute~=value] 
[attribute|-value] 


[attribute^-value] 
[attribute$=value] 


[attribute*-value] 


CSS 属性 选择 器 详解 


描述 
用 于 选取 带 有 指定 属性 的 元 素 。 
用 于 选取 带 有 指定 属性 和 值 的 元 素 。 
用 于 选取 属性 值 中 包含 指定 词汇 的 元 素 。 
用 于 选取 带 有 以 指定 值 开 头 的 属性 值 的 元 素 ， 该 值 必须 是 


整个 单词 。 

匹配 属性 值 以 指定 值 开头 的 每 个 元 素 。 
匹配 属性 值 以 指定 值 结尾 的 每 个 元 素 。 
匹配 属性 值 中 包含 指定 值 的 每 个 元 素 。 
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后 代 选 择 器 (descendant selector) 又 称 为 包含 选择 器 。 
后 代 选 择 器 可 以 选择 作为 某 元 素 后 代 的 元 素 。 


根据 上 下 文选 择 元 素 


我 们 可 以 定义 后 代 选 择 器 来 创建 一 些 规则 ， 使 这 些 规则 在 某 些 文档 结构 中 起 作用 ， 
而 在 另外 一 些 结构 中 不 起 作用 。 


举例 来 涪 ， 如 果 您 希望 只 对 h1 元 素 中 的 em 元 素 应 用 样式 ， 可 以 这 样 写 : 


hi em {color:red; } 


上 面 这 个 规则 会 把 作为 h1 元 素 后 代 的 em 元 素 的 文本 变 为 红色 。 其 他 em MA 
(如 段落 或 块 引 用 中 的 em) 则 不 会 被 这 个 规则 选中 : 


<hi>This is a <em>important</em> heading</h1> 
<p>This is a <em>important</em> paragraph.</p> 


当然 ， 您 也 可 以 在 h1 中 找到 的 每 个 em 元 素 上 放 一 个 class 属性 ， 但 是 显然 ， 后 
代 选 择 器 的 效率 更 高 。 


语法 解释 

在 后 代 选 择 器 中 ， 规 则 左边 的 选择 器 一 端 包括 两 个 或 多 个 用 空格 分 隔 的 选择 器 。 选 
择 器 之 间 的 空格 是 一 种 结合 符 (combinator) 。 每 个 空格 结合 符 可 以 解释 为 “... 在 
… 找到 ”“.… 作为 … 的 一 部 分 ul 作为 … 的 后 代 ”， 但 是 要 求 必须 从 右 向 左 读 选 
择 器 。 

因此 ，h1 em 选择 器 可 以 解释 为 “作为 h1 元 素 后 代 的 任何 em 元 素 ”。 如 果 要 从 左 
向 右 读 选择 器 ， 可 以 换 成 以 下 说 法 :“ 包 含 em 的 所 有 hi 会 把 以 下 样式 应 用 到 该 
em", 


具体 应 用 


后 代 选 择 器 的 功能 极其 强大 。 有 了 它 ， 可 以 使 HTML 中 不 可 能 实现 的 任务 成 为 可 
Lat, 
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假设 有 一 个 文档 ， 其 中 有 一 个 边栏 ， 还 有 一 个 主 区 。 边 栏 的 背景 为 蓝 色 ， 主 区 的 背 
景 为 白色 ， 这 两 个 区 都 包含 链接 列表 。 不 能 把 所 有 链接 都 设置 为 蓝 色 ， 因 为 这 样 一 
来 边栏 中 的 蓝 色 链接 都 无 法 看 到 。 


解决 方法 是 使 用 后 代 选 择 器 。 在 这 种 情况 下 ， 可 以 为 包含 边栏 的 div 指定 值 为 
sidebar 的 class 属性 ， 并 把 主 区 的 class 属性 值 设置 为 maincontent。 然 后 编写 以 
TEX: 


div.sidebar ([background:blue;) 
div.maincontent {background:white; } 
div.sidebar a:link {color:white; } 
div.maincontent a:link (color:blue;) 


有 关 后 代 选 择 器 有 一 个 易 被 忽视 的 方面 ， 即 两 个 元 素 之 间 的 层次 间隔 可 以 是 无 限 
的 。 


例如 ， 如 果 写 作 ul em， 这 个 语法 就 会 选择 从 ul 元 素 继承 的 所 有 em 元 素 ， 而 不 论 
em BRE Z RB Ro 
会 


因此 ，ul em 将 会 选择 以 下 标记 中 的 所 有 em 7538 : 


<ul> 
«li»List item 1 
«ol» 
<li>List item 1-1«/li» 
<li>List item 1-2«/li» 
«li»List item 1-3 
«ol» 
<li>List item 1-3-1«/li» 
<li>List item «em»1-3-2«/em»«/li» 
<li>List item 1-3-3«/li» 
«/ol» 
</li> 
<li>List item 1-4</li> 
</ol> 
</li> 


<li>List item 2</li> 
<li>List item 3</li> 
</ul> 


CSS F70seit 3425 


与 后 代 选 择 器 相 比 ， 子 元 素 选 择 器 (Child selectors) 只 能 选择 作为 某 元 素 子 元 素 
的 元 素 。 
选择 子 元 素 


如 果 您 不 希望 选择 任意 的 后 代 元 素 ， 而 是 希望 缩小 范围 ， 只 选择 某 个 元 素 的 子 元 
素 ， 请 使 用 子 元 素 选 择 器 (Child selector) 。 


例如 ， 如 果 您 希望 选择 只 作为 h1 元 素 子 元 素 的 strong 元 素 ， 可 以 这 样 写 : 


hi > strong {color:red;} 
n ^ h1 下 面 的 两 个 strong 元 素 变 为 红色 ， 但 是 第 二 个 h1 中 的 


eda 不 受 影响 


<hi>This is <strong>very</strong> <strong>very</strong> important.- 
<hi>This is <em>really <strong>very</strong></em> important .</h1i> 





吾 法 解释 


您 应 该 已 经 注意 到 了 ， 子 选择 器 使 用 了 大 于 号 ( 子 结合 符 ) 。 


合 符 两 边 可 以 有 空白 符 ， 可 选 的 。 因 此 ， 以 下 写法 都 没有 问题 : 
hi > strong 
hi» strong 
h1 >strong 
hi>strong 


如 果 从 右 向 左 读 ， 选 择 器 h1 > strong 可 以 解释 为 “选择 作为 h1 元 素 子 元 素 的 所 有 
strong 元 素 ”。 


结合 后 代 选 择 左 和 子 选择 赴 


table.company td > p 


上 面 的 选择 器 会 选择 作为 td 元 素 子 元 素 的 所 有 p 元 素 ， 这 个 td TRAM table 
元 素 继承 ， 该 table 元 素 有 一 个 包含 company 的 class 属性 。 


CSS 相 令 兄弟 选择 器 


相 邻 兄弟 选择 器 (Adjacent sibling selector) 可 选择 紧 接 在 另 一 元 素 后 的 元 素 ， 
且 二 者 有 相同 父 元 素 。 


xt A THAT 5028 


如 果 需 要 选择 紧 接 在 另 一 个 元 素 后 的 元 素 ， 而 且 二 者 有 相同 的 父 元 素 ， 可 以 使 用 相 
邻 兄弟 选择 器 (Adjacent sibling selector) 。 


例如 ， 如 果 要 增加 紧 接 在 h1 元 素 后 出 现 的 段落 的 上 边 距 ， 可 以 这 样 写 : 


hi + p {margin-top:50px; } 


ete 紧 接 在 h1 元 素 后 出 现 的 段落 ，h1 和 p 元 素 拥有 共同 的 父 
7L3R o 


相 邻 兄弟 选择 器 使 用 了 加 号 (+) ， 即 相 邻 兄弟 结合 符 (Adjacent sibling 
combinator) 。 


注释 : 与 子 结合 符 一 样 ， 相 邻 兄 弟 结合 符 旁 边 可 以 有 空白 符 。 
请 看 下 面 这 个 文档 树 片段 : 


<div> 
<ul> 
<li>List item 1</1i> 
<li>List item 2</1i> 
<li>List item 3«/li» 
«/ul» 
«ol» 
<li>List item 1«/1li» 
<li>List item 2«/1li» 
<li>List item 3«/li» 
«/ol» 
«/div» 


在 上 面 的 片段 中 ，div 元 素 中 包含 两 个 列表 : 一 个 无 序列 表 ， 一 个 有 序列 表 ， 每 个 
列表 都 包含 三 个 列表 项 。 这 两 个 列表 是 相 邻 兄弟 ， 列 表 项 本 身 也 是 相 邻 兄弟 。 不 

过 ， 第 一 个 列表 中 的 列表 项 与 第 二 个 列表 中 的 列表 项 不 是 相 邻 兄弟 ， 因 为 这 两 组 列 
表 项 不 属于 同一 父 元 素 (最 多 只 能 算 堂 兄弟 ) 。 


请 记 住 ， 用 一 个 结合 符 只 能 选择 两 个 相 邻 兄弟 中 的 第 二 个 元 素 。 请 看 下 面 的 选择 
器 : 
li + li {font-weight:bold; } 


上 面 这 个 选择 器 只 会 把 列表 中 的 第 二 个 和 第 三 个 列表 项 变 为 粗 体 。 第 一 个 列表 项 不 


受 影 响 。 
结合 其 他 选择 器 


相 邻 兄弟 结合 符 还 可 以 结合 其 他 结合 符 : 


html > body table + ul {margin-top:20px; } 


这 个 选择 器 解释 为 : 选择 紧 接 在 table 元 素 后 出 现 的 所 有 兄弟 ul 元 素 ， 该 table 元 
素 包 含 在 一 个 body 元 素 中 ，body 元 素 本 身 是 html 元 素 的 子 元 素 。 


CSS 44 #® (Pseudo-classes) 


CSS 伪 类 用 于 向 某 些 选 择 器 添加 特殊 的 效果 。 


CSS 伪 类 (Pseudo-classes) 实 例 : 
超 链 接 

&lt;html&gt; 

&lt;head&gt; 


&lt;style type="text/css"&gt; 
a:link (color: #FF0000} 
a:visited (color: #00FF00} 
a:hover (color: £ZFFOOFF) 
a:active (color: #0000FF} 
&lt;/style&gt; 


&lt;/head&gt; 
&lt;body&gt; 
&lt;p&gt;&lt;b&gt;&lt;a href="/index.html" target="_blank"&gt ; x=- 
&lt;pagt;&lt; bagt ; SE :&lt;/b&gt; Æ CSS HANH, a:hover 必须 位 于 a:lir 
&lt;pagt;&lt; bagt ; SE : &1lt;/b&gt;7E CSS HLH, a:active 必须 位 于 a:hc 


&lt;/body&gt; 
&lt;/html&gt; 


El — — RE 
超 链 接 2 





&lt;html&gt; 
&lt;head&gt; 


&lt;style type="text/css"&gt; 
a.one:link (color: #ff0000} 
a.one:visited (color: 4Z0000ff) 
a.one:hover (color: #ffcc00} 


a.two:link (color: #ff0000} 
a.two:visited (color: 4Z0000ff) 


a.two:hover (font-size: 


150%} 


a.three:link (color: #ff0000} 
a.three:visited (color: 40000ff) 
a.three:hover (background: #66ff66} 


a.four:link (color: #ff0000} 
a.four:visited (color: #0000ff} 
a.four:hover (font-family: monospace} 


a.five:link (color: #ff0000; text-decoration: none} 
a.five:visited (color: 40000ff; text-decoration: none} 
a.five:hover {text-decoration: underline} 


&lt;/style&gt; 
&lt;/head&gt; 


&lt;body&gt; 


&lt;p&gt,; 请 把 鼠标 移动 到 这 些 链接 上 ， 以 查看 效果 : Alt; /pagt; 


&lt;p&gt;&lt;b&gt;&lt;a 
&lt;p&gt;&lt;b&gt;&lt;a 
&lt;p&gt;&lt;b&gt;&lt;a 
&lt;p&gt;&lt;b&gt;&lt;a 
&lt;p&gt;&lt;b&gt;&lt;a 
&lt;/body&gt; 


&lt;/html&gt; 


关于 = 王冠 到 


超 链 接 - :focus 的 使 用 


class="one" href="/index.html" target-" bl: 
class="two" href="/index.html" target="_blé 
class="three" hrefz"/index.html" target-" I 
class="four" hrefz"/index.html" target-" b. 
class="five" hrefz"/index.html" target-z" b. 





&lt; DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ' 
&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 

input:focus 

t 


background-color:yellow; 


&lt;/style&gt; 
&lt;/head&gt; 


&lt;body&gt; 

&lt;form action-"form action.asp" method="get"&gt; 

First name: &lt;input type="text" name="fname" /&gt;&lt;br /&gt; 
Last name: &lt;input type="text" name-"lname" /&gt;&lt;br /&gt; 
&lt;input type="submit" value="Submit" /&gt; 

&lt;/form&gt; 


&lt;p&gt;&lt;b&gt'; 注 释 :&lt;/b&gt; 如 果 已 规定 !DOCTYPE， 那 么 Internet E 


&lt;/body&gt; 
&lt;/html&gt; 





‘first-child ( 首 个 子 对 象 ) 


&lt; DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ' 
&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 

p:first-child {font-weight: bold;) 

li:first-child {text-transform:uppercase; } 

&lt;/style&gt; 

&lt;/head&gt; 


&lt;body&gt; 

&lt;div&gt; 

&lt;p&gt;These are the necessary steps:&lt;/p&gt; 

&lt;ul&gt; 

&lt;li&gt;Intert Key&lt;/li&gt; 

&lt;li&gt;Turn key &lt;strong&gt;clockwise&lt;/strong&gt;&lt;/li&g! 
&lt;li&gt;Push accelerator&lt;/li&gt; 

&lt;/ul&gt; 

&lt;p&gt;Do &lt;em&gt;not&lt;/em&gt; push the brake at the same tir 
&lt;/div&gt; 


&lt;p&gt;&lt;b&dgt'; 注 释 :&lt;/b&gt; 必 须 声 明 DOCTYPE, 3f :first-child 
&lt;/body&gt; 


&lt;/html&gt; 





lang G&8) 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
q:lang(no) 

1 

quotes: "mn n m" 

} 

&lt;/style&gt; 

&lt;/head&gt; 


&lt;body&gt; 
&lt;p&gt;:lang 伪 类 人 允许 您 为 不 同 的 语言 定义 特殊 的 规则 。 在 下 面 的 例子 中 ， 在 下 面 的 


&1t;p&gt; 一 些 文本 &lt;q lang="no"&gt ;上 段落 中 的 引用 &1lt;/gq&gt; 一 些 文本 。&: 
&lt;/body&gt; 


&lt;/html&gt; 
E | 





语法 


伪 类 的 语法 : 


selector : pseudo-class {property: value} 


CSS 类 也 可 与 伪 类 搭配 使 用 。 


selector.class : pseudo-class {property: value} 


锚 伪 类 


在 支持 CSS 的 浏览 器 中 ， ease GA ope er 这 些 状 态 包 
括 : 活动 状态 已 被 访问 状态 ， 未 被 访问 状态 。 和 妃 标 基 停 状态 


a:link (color: #FF0000} /* 未 访问 的 链接 */ 
a:visited (color: #00FF00} /* 已 访问 的 链接 */ 

a:hover (color: #FF00FF} /* 鼠标 移动 到 链接 上 */ 
a:active (color: #0000FF} /* 选 定 的 链接 */ 


提示 : 在 CSS 定义 中 ，a:hover 必须 被 置 于 a:link 和 a:visited 之 后 ， 才 是 有 效 的 。 
tem : 在 CSS 定义 中 ，a:active 必须 被 置 于 a:hover 之 后 ， 才 是 有 效 的 。 
提示 : 伪 类 名 称 对 大 小 写 不 敏感 。 
伪 类 与 CSS 类 
伪 类 可 以 与 CSS 类 配合 使 用 : 
a.red : visited (color: #FF0000} 
<a class-"red" href="css_syntax.asp">CSS Syntax</a> 


假如 上 面 的 例子 中 的 链接 被 访问 过 ， 那 么 它 将 显示 为 红色 。 


CSS2 - :first-child 44 # 


您 可 以 使 用 :first-child 伪 类 来 选择 元 素 的 第 一 个 子 元 素 。 这 个 特定 伪 类 很 容易 遭 到 
误解 ， 所 以 有 必要 举例 来 说 明 。 考虑 以 下 标记 : 


<div> 

<p>These are the necessary steps:</p> 

<ul> 

<li>Intert Key</1li> 

<li>Turn key <strong>clockwise</strong></1i> 

<li>Push accelerator</1li> 

</ul> 

<p>Do <em>not</em> push the brake at the same time as the accelerat 
</div> 








在 上 面 的 例子 中 ， 作 为 第 一 个 元 素 的 元 素 包 括 第 一 个 p、 第 一 个 站 和 strong 和 em 
元 素 。 


给 定 以 下 规则 : 


p:first-child {font-weight: bold; } 
li:first-child {text-transform:uppercase; } 


第 一 个 规则 将 作为 某 元 素 第 一 个 子 元 素 的 所 有 p 元 素 设 置 为 粗 体 。 第 二 个 规则 将 作 
为 某 个 元 素 (在 HTML 中 ， 这 肯定 是 ol Mul wR) 第 一 个 子 元 素 的 所 有 li 元 素 变 
成 大 写 。 

请 访问 该 链接 ， 来 查看 这 个 :first-child 实例 的 效果 。 


提示 : 最 常见 的 错误 是 认为 p:first-child 之 类 的 选择 器 会 选择 p 元 素 的 第 一 个 子 元 


注释 : 必须 声明 <IDOCTYPE>， 这 样 :first-child 才能 在 IE 中 生效 。 

为 了 使 您 更 透彻 地 理解 :first-child 伪 类 ， 我 们 另外 提供 了 3 个 例子 : 
例子 1 - 匹配 第 一 个 <p> TR 

在 下 面 的 例子 中 ， 选 择 器 匹配 作为 任何 元 素 的 第 一 个 子 元 素 的 p 元 素 : 


«html» 
«head» 
«style type="text/css"> 
p:first-child ( 
color: red; 


</style> 
</head> 


<body> 
<p>some text</p> 
<p>some text</p> 
</body> 
</html> 


例子 2 - 匹配 所 有 <p> 元 素 中 的 第 一 个 <i> 元 素 
在 下 面 的 例子 中 ， 选 择 器 匹配 所 有 <p> 元 素 中 的 第 一 个 <i> TH: 


<html> 

<head> 

<style type="text/css"> 

p > i:first-child { 
font-weight:bold; 


} 
</style> 
</head> 


<body> 
<p>some <i>text</i>. some <i>text</i>.</p> 
<p>some <i>text</i>. some <i>text</i>.</p> 
</body> 
</html> 


例子 3 - 匹配 所 有 作为 第 一 个 子 元 素 的 <p> 元 素 中 的 所 有 <i> 元 
素 


ea CM een G 
<i> JUS: 


«html» 

«head» 

«style type="text/css"> 

p:first-child i ( 
color:blue; 


</style> 
</head> 


<body> 
<p>some <i>text</i>. some <i>text</i>.</p> 
<p>some <i>text</i>. some <i>text</i>.</p> 


</body> 
</html> 


CSS2 - :lang 44 # 


‘lang 伪 类 使 你 有 能 力 为 不 同 的 语言 定义 特殊 的 规则 。 在 下 面 的 例子 中 ，:lang 类 为 
属性 值 为 no 的 q 元 素 定 义 引 号 的 类 型 : 


<html> 
<head> 


<style type="text/css"> 
q:lang(no) 
{ 


quotes: "-" "~" 
</style> 
</head> 
<body> 


<p> 文 字 <q lang="no"> 段 落 中 的 引用 的 文字 </q> 文 字 </p> 
«/body»«/html» 


W3C : "W3C" 列 指示 出 该 属性 在 哪个 CSS 版 本 中 定义 (CSS1 还 是 CSS2) 。 
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属性 描述 CSS 
:active 向 被 激活 的 元 素 添 加 样式 。 1 
:focus 向 拥有 键 衣 输入 焦点 的 元 素 添加 样式 。 2 
‘hover 当 饥 标 蚌 浮 在 元 素 上 方 时 ， 向 元 素 添加 样式 。 1 
:link 向 未 被 访问 的 链接 添加 样式 。 1 
visited 向 已 被 访问 的 链接 添加 样式 。 1 
:first-child 向 元 素 的 第 一 个 子 元 素 添 加 样式 。 2 
:lang 向 带 有 指定 lang 属性 的 元 素 添加 样式 。 2 


POO Ps 7D Am placecac\ 
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CSS (430s (Pseudo-elements) 


CSS 伪 元 素 用 于 向 某 些 选择 器 设置 特殊 效果 。 


语法 
伪 元 素 的 语法 : 


selector:pseudo-element {property:value;} 


CSS 类 也 可 以 与 伪 元 素 配 合 使 用 : 


selector.class:pseudo-element 1[property:value;) 


‘first-line (470% 


"first-line" 伪 元 素 用 于 向 文本 的 首 行 设置 特殊 样式 。 


在 下 面 的 例子 中 ， 浏 览 器 会 根据 "first-line" 伪 元 素 中 的 样式 对 p 元 素 的 第 一 行文 本 
进行 格式 化 : 


实例 


p:first-line 


{ 
color: #ff0000; 
font-variant:small-caps; 


} 


注释 : "first-line" 伪 元 素 只 能 用 于 块 级 元 素 。 
注释 : 下 面 的 属性 可 应 用 于 "first-line" 伪 元 素 : 


font 

color 
background 
word-spacing 
letter-spacing 
text-decoration 
vertical-align 
text-transform 


e line-height 
e clear 


‘first-letter 伪 元 素 
"first-letter" 伪 元 素 用 于 向 文本 的 首 字 母 设置 特殊 样式 : 


p:first-letter 


{ 
color: #ff0000; 
font-size:xx-large; 


} 


注释 : "first-letter" 伪 元 素 只 能 用 于 块 级 元 素 。 
注释 : 下 面 的 属性 可 应 用 于 "first-letter" 伪 元 素 : 


font 

color 
background 
margin 
padding 
border 
text-decoration 
vertical-align ( 仅 当 float 为 none 时 ) 
text-transform 
line-height 
float 

clear 


伪 元 素 和 CSS X 
伪 元 素 可 以 与 CSS 类 配合 使 用 : 


p.article:first-letter 


{ 
color: #FF0000; 
} 


«p class="article">This is a paragraph in an article, </p> 


上 面 的 例子 会 使 所 有 class 为 article 的 段落 的 首 字 母 变 为 红色 。 


多 重 伪 元 到 


可 以 结合 多 个 伪 元 素来 使 用 。 

在 下 面 的 例子 中 ， 段 落 的 第 一 个 字母 将 显示 为 红色 ， 其 字体 大 小 为 xx-large。 第 一 
行 中 的 其 余 文 本 将 为 蓝 色 ， 并 以 小 型 大 写字 母 显 示 。 段 落 中 的 其 余 文 本 将 以 默认 字 
体 大 小 和 颜色 来 显示 : 


p:first-letter 


{ 
color :#ff0000; 
font-size:xx-large; 


p:first-line 


{ 
color: #0000fFf; 
font-variant:small-caps; 


CSS2 - :before {430% 


"before" 伪 元 素 可 以 在 元 素 的 内 容 前 面 插入 新 内 容 。 
下 面 的 例子 在 每 个 <h1> 元 素 前 面 插入 一 幅 图 片 : 


hi:before 


{ 
content:url(logo.gif); 


CSS2 - :after 伪 元 素 


"after" 伪 元 素 可 以 在 元 素 的 内 容 之 后 插入 新 内 容 。 
下 面 的 例子 在 每 个 <h1> 元 素 后 面 插 入 一 幅 图 片 : 


hi:after 


content:url(logo.gif); 
} 


伪 元 素 


W3C : "W3C" 列 指示 出 该 属性 在 哪个 CSS 版 本 中 定义 (CSS1 还 是 CSS2) 。 


W3School Html & Css 教程 


属性 描述 CSS 
:first-letter 向 文本 的 第 一 个 字母 添加 特殊 祥 式 。 1 
‘first-line 向 文本 的 首 行 添 加 特殊 样式 。 1 
:before 在 元 素 之 前 添加 内 容 。 2 
:after 在 元 素 之 后 添加 内 容 。 2 


CSS 44305 (Pseudo-elements) 322 


CSS 高 级 


CSS 水 平 对 齐 


在 CSS 中 ， 可 以 使 用 多 种 属性 来 水 平 对 齐 元 素 。 


对 齐 块 元 素 


块 元 素 指 的 是 占据 全 部 可 用 宽度 的 元 素 ， 并 且 在 其 前 后 都 会 换行 。 
块 元 素 的 例子 


<hi> 
<p> 
<div> 


对 于 文本 对 齐 ， 请 参见 CSS 文本 一 章 。 
在 本 教程 中 ， 我 们 将 向 您 展示 出 于 布局 目的 如 何 水 平 对 齐 块 级 元 素 。 


使 用 margin 属性 来 水 平 对 齐 


可 通过 将 左 和 右 外 边 距 设置 为 "auto"， 来 对 齐 块 元 素 。 


注释 : 除非 已 经 声明 了 IDOCTYPE， 否 则 使 用 margin:auto 在 IE8 以 及 更 早 的 版 本 
中 是 无 效 的 。 


把 左 和 右 外 边 距 设置 为 auto， 规 定 的 是 均等 地 分 配 可 用 的 外 边 距 。 结 果 就 是 居中 的 


元 素 : 
实例 


.Center 


margin-left:auto; 
margin-right:auto; 

width: 70%; 
background-color :#b0e0e6; 
} 


提示 : 如 果 宽 度 是 100%， 则 对 齐 没有 效果 。 


注释 : 在 IE5 中 ， 对 于 块 元 素 存在 一 个 外 边 距 处 理 方面 的 BUG。 如 需 使 上 面 的 例 
CE IE5 中 有 效 ， 请 添加 一 些 额外 的 代码 。。 


使 用 position 属性 进行 左 和 右 对 齐 
对 齐 元 素 的 方法 之 一 是 使 用 绝对 定位 : 


实例 


.right 

{ 

position:absolute; 

right :0px; 

width: 300px; 
background-color :#b0e0e6; 
} 


注释 : ESTEMITRARMIER TA HBR, FRE ETR 


跨 浏 览 器 兼容 性 问题 


当 像 这 样 对 齐 元 素 时 ， 对 <body> 元 素 的 外 边 距 和 内 边 距 进 行 预 定义 是 一 个 好 主 
意 。 这 样 可 以 避免 在 不 同 的 浏览 器 中 出 现 可 见 的 差异 


当 使 用 position 属性 时 ，IE8 以 及 更 时 的 版 本 存在 一 个 问题 。 如 果 容 器 元 素 (在 我 
们 的 案例 中 是 <div class="container">) 设置 了 指定 的 宽度 ， 并 且 省 略 了 
IDOCTYPE 声明 ， 那 么 IE8 以 及 更 早 的 版 本 会 在 右 便 增加 17px 的 外 边 距 。 这 似乎 
是 为 滚动 条 预 留 的 空间 。 当 使 用 position 属性 时 ， 请 始终 设置 !DOCTYPE 声明 : 


实例 


body 

{ 

margin:0; 
padding:0; 

} 

.container 

{ 
position:relative; 
width:100%; 


.right 

{ 

position:absolute; 

right :0px; 

width: 300px; 
background-color :#b0e0e6; 
} 


使 用 float 属性 来 进行 左 和 右 对 齐 
对 齐 元 素 的 另 一 种 方法 是 使 用 float 属性 : 


实例 


.right 


{ 

float:right; 

width:300px; 
background-color :#b0e0e6; 
} 


跨 浏 览 器 兼容 性 问题 
当 像 这 样 对 齐 元 素 时 ， 对 <body> 元 素 的 外 边 距 和 内 边 距 进 行 预 定义 是 一 个 好 主 
意 。 这 样 可 以 避免 在 不 同 的 浏览 器 中 出 现 可 见 的 差异 。 


当 使 用 float BIEN, IES 以 及 更 早 的 版 本 存在 一 个 问题 。 如 果 省 略 DOCTYPE 声 
明 ， 那 么 IE8 以 及 更 里 的 版 本 会 在 右 侧 增加 17px 的 外 边 距 。 这 似乎 是 为 滚动 条 预 
留 的 空间 。 当 使 用 float 属性 时 ， 请 始终 设置 IDOCTYPE 声明 : 


实例 
body 
{ 
margin:0; 
padding:0; 
j 
.right 


float:right; 
width:300px; 
background-color :#b0e0e6; 


CSS 尺寸 (Dimension) 


CSS Rt (Dimension) 属性 允许 你 控制 元 素 的 高 度 和 宽度 。 同 样 ， 它 允许 你 增加 
行 间距 。 


CSS 尺寸 实例 : 
使 用 像素 值 设置 图 像 的 高 度 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
img.normal 


height: auto 
j 


img.big 


{ 
height: 160px 
j 


img.small 
{ 
height: 30px 


} 
&lt;/style&gt; 
&lt;/head&gt; 
&lt;body&gt; 


&lt;img class-"normal" srcz"/i/eg smile.gif" /&gt; 
&lt;br /&gt; 

&lt;img class-"big" src="/i/eg_smile.gif" /&gt; 
&lt;br /&gt; 

&lt;img class-"small" src="/i/eg_smile.gif" /&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


使 用 百分比 设置 图 像 的 高 度 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
img.normal 

1 

height: auto 


j 


img.big 

{ 

height: 50% 
j 


img.small 

{ 

height: 10% 

} 
&lt;/style&gt; 
&lt;/head&gt; 
&lt;body&gt; 


&lt;img class-"normal" srcz"/i/eg smile.gif" /&gt; 
&lt;br /&gt; 

&lt;img class-"big" src="/i/eg_smile.gif" /&gt; 
&lt;br /&gt; 

&lt;img class-"small" src="/i/eg_smile.gif" /&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


使 用 像素 值 来 设置 元 素 的 宽度 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
img 

{ 

width: 300px 


&lt;/style&gt; 

&lt;/head&gt; 

&lt;body&gt; 

&lt;img srcz"/i/eg smile.gif" /&gt; 
&lt;/body&gt; 

&lt;/html&gt; 


使 用 百分比 来 设置 元 素 的 宽度 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
img 

{ 

width: 50% 

} 

&lt;/style&gt; 

&lt;/head&gt; 

&lt;body&gt; 


&lt;img srcz"/i/eg smile.gif" /&gt; 
&lt;/body&gt; 
&lt;/html&gt; 


度 


Ni 
[ii 


元 素 的 最 大 高 


To} 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
p 

{ 

max-height: 10px 

} 

&lt;/style&gt; 

&lt;/head&gt; 

&lt;body&gt; 


&1t ; p&gt ;这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文 本 。 
这 是 一 些 文本 。 这 是 一 些 文 本 。 这 是 一 些 文本 。 

这 是 一 些 文 本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 

这 是 一 些 文本 。 ole Hr 0 

这 是 


一 些 文本 。 这 是 一 些 文 本 。 这 是 一 些 文本 。&1Lt;/p&gt， 
&lt;img src="/i/eg_smile.gif" /&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


- 


使 用 像素 值 来 设置 元 素 的 最 大 宽度 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
p 

1 

max-width: 300px 

} 

&lt;/style&gt; 

&lt;/head&gt; 

&lt;body&gt; 


&1t ; p&gt; 这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 
这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 
这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 
这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 
这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。&1t; /p&gt; 


a 


M " n 


&lt;/body&gt; 
&lt;/html&gt; 


使 用 百分比 来 设置 元 素 的 最 大 宽度 


e 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
p 

{ 

max-width: 50% 

} 

&lt;/style&gt; 

&lt;/head&gt; 

&lt;body&gt; 


&1t;p&gt; 这 是 一 些 文本 。 这 是 一 些 文 本 。 这 是 一 些 文本 。 
这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 

这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 

这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 

这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。&1l1t;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


使 用 像素 值 来 设置 元 素 的 最 小 高 度 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
p 

1 

min-height: 100px 

} 

&lt;/style&gt; 

&lt;/head&gt; 

&lt;body&gt; 


&1t ; p&gt ;这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文 本 。 
这 是 一 些 广 本。 这 是 一 些 文本 。 这 是 一 些 文本 。 

这 是 一 些 文 本 。 这 是 一 些 文 本 。 这 是 一 些 文本 。 

这 是 一 些 文本 。 一 些 文 本 。 这 是 一 些 文本 。 

这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。&1t;/p&gt; 


L i 


&lt;img srcz"/i/eg smile.gif" /&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


使 用 像素 值 来 设置 元 素 的 最 小 宽度 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
p 


{ 
min-width: 1000px 


&lt;/style&gt; 
&lt;/head&gt; 
&lt;body&gt; 


&1t ; p&gt ;这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 
这 是 一 些 文 本 。 这 是 一 些 文 本 。 这 是 一 些 文本 。 
这 是 一 些 文 本 。 这 是 一 些 文本 。 这 是 一 些 文 本 。 
REEMA, REEMA, REEMA. 
这 是 一 些 文 本 。 这 是 一 些 文本 。 这 是 一 些 文本 。&1t;/p&gt; 


&lt;img src="/i/eg_smile.gif" /&gt; 
&lt;/body&gt; 
&lt;/html&gt; 


使 用 百分比 来 设置 元 素 的 最 小 宽度 


&lt;html&gt; 
&lt;head&gt; 
&lt;style type="text/css"&gt; 


p 

{ 

min-width: 200% 
} 
&lt;/style&gt; 
&lt;/head&gt; 
&lt;body&gt; 


&1t ; p&gt ;这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文 本 。 
这 是 一 些 广 本。 这 是 一 些 文本 。 这 是 一 些 文本 。 
这 是 一 些 文 本 。 这 是 一 些 文 本 。 这 是 一 些 文本 。 
这 是 一 些 文本 。 一 些 文 本 。 这 是 一 些 文本 。 
这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。&1t;/p&gt; 


L i 


&lt;img srcz"/i/eg smile.gif" /&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


使 用 百分比 设置 行 间距 


&lt;html&gt; 


&lt;head&gt; 

&lt;style type="text/css"&gt; 
p.small {line-height: 90%} 
p.big {line-height: 200%} 
&lt;/style&gt; 

&lt;/head&gt; 


&lt;body&gt; 


&lt;p&gt; 

这 是 拥有 标准 行 高 的 段落 。 

在 大 多 数 浏览 器 中 默认 行 高 大 约 是 110% 到 120%。 
这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

&lt;/p&gt; 


&lt;p class="small"&gt; 
这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 
&lt;/p&gt; 


&lt;p class="big"&gt; 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
&lt;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


使 用 像素 值 设置 行 间距 


&lt;html&gt; 


&lt;head&gt; 
&lt;style type="text/css"&gt; 
p.small 
{ 
line-height: 10px 
} 
p.big 
{ 
line-height: 30px 


&lt;/style&gt; 
&lt;/head&gt; 


&lt;body&gt; 


&lt;p&gt; 

这 是 拥有 标准 行 高 的 段落 。 

在 大 多 数 浏览 器 中 默认 行 高 大 约 是 20px。 
这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

&lt;/p&gt; 


&lt;p class="small"&gt; 
这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 
&lt;/p&gt; 


&lt;p class="big"&gt; 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
&lt;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


使 用 数值 来 设置 行 间距 


&lt;html&gt; 


&lt;head&gt; 

&lt;style type="text/css"&gt; 
p.small 

{ 

line-height: 0.5 

} 

p.big 

{ 

line-height: 2 


&lt;/style&gt; 
&lt;/head&gt; 


&lt;body&gt; 


&lt;p&gt; 

这 是 拥有 标准 行 高 的 段落 。 
默认 行 高 大 约 是 1. 

这 是 拥有 标准 行 高 的 段落 。 
这 是 拥有 标准 行 高 的 段落 。 
这 是 拥有 标准 行 高 的 段落 。 
这 是 拥有 标准 行 高 的 段落 。 
这 是 拥有 标准 行 高 的 段落 。 
&lt;/p&gt; 





&lt;p class="small"&gt; 
这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 
&lt;/p&gt; 





&lt;p class="big"&gt; 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
&lt;/p&gt; 





&lt;/body&gt; 
&lt;/html&gt; 


CSS 尺寸 属性 


度 和 宽度 。 同 样 ， 还 允许 你 增加 行 间距 。 


局 


CSS 尺寸 属性 允许 你 控制 元 素 的 


属性 


height 


line-height 


max-height 


max-width 


高 度 。 


设置 元 素 的 最 小 
设置 元 素 的 最 小 


min-height 


宽度 。 


min-width 
width 


CSS 分 类 (Classification) 


CSS 分 类 属性 允许 你 规定 如 何以 及 在 何 处 显示 元 素 。 


CSS 分 类 (Classification) 实 例 : 
如 何 把 元 素 显示 为 内 联 元 素 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
p (display: inline} 

div (display: none} 
&lt;/style&gt; 

&lt;/head&gt; 


&lt;body&gt; 
&lt;p&gt; 本 例 中 的 样式 表 把 段落 元 素 设置 为 内 联 元 素 。 &lt;/p&gt; 


&lt;p&gt;m] div 元 素 不 会 显示 出 来 1&lLt;/p&gt 


&lt;div&gt;div 元 素 的 内 容 不 会 显示 出 来 &1lt;/divagt; 
&lt;/body&gt; 
&lt;/html&gt; 


如 何 把 元 素 显 示 为 块 级 元 素 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
span 

{ 

display: block 


} 
&lt;/style&gt; 
&lt;/head&gt; 
&lt;body&gt; 


&1t ; span&gt ; 本 例 中 的 样式 表 把 span TRAE ARAM &lt;/span&gt; 
&lt ;span&gt ;两 个 span 元 素 之 间 产 生 了 一 个 换行 行为 。&1t;/span&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


float 属性 的 简单 应 用 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
img 

{ 

float:right 

} 

&lt;/style&gt; 

&lt;/head&gt; 


&lt;body&gt; 

&1t ; p&gt ;在 下 面 的 段落 中 ， 我 们 添加 了 一 个 样式 为 &lt;b&gt;float:right&lt;/bt 
&lt;p&gt; 

&lt;img src="/i/eg_cute.gif" /&gt; 

This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
&lt;/p&gt; 

&lt;/body&gt; 


&lt;/html&gt; 
图 E 
将 带 有 边框 和 边界 的 图 像 浮 动 于 段落 的 右 例 





&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
img 

{ 

float:right; 

border:1px dotted black; 
margin:Opx Opx 15px 20px; 
} 

&lt;/style&gt; 
&lt;/head&gt; 


&lt;body&gt; 

&1t ; p&gt ;在 下 面 的 段落 中 ， 图 像 会 浮动 到 右 侧 ， 并 且 添 加 了 点 状 的 边框 。 我 们 还 为 图 像 
&lt;p&gt; 

&lt;img src="/i/eg_cute.gif" /&gt; 

This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
&lt;/p&gt; 

&lt;/body&gt; 


&lt;/html&gt; 
-| RB 
带 标题 的 图 像 浮动 于 右 侧 





&lt;html&gt; 
&lt;head&gt; 

&lt;style type="text/css"&gt; 
div 

{ 

float:right; 
width:120px; 

margin:0 0 15px 20px; 
padding:15px; 
border:1px solid black; 
text-align:center; 


&lt;/style&gt; 
&lt;/head&gt; 


&lt;body&gt; 

&lt;div&gt; 

&lt;img src="/i/eg_cute.gif" /&gt;&lt;br /&gt; 

CSS is fun! 

&lt;/div&gt; 

&lt;p&gt; 

This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
&lt;/p&gt; 


&lt;p&gt; 
在 上 面 的 段落 中 ，div 元 素 的 宽度 是 120 像素 ， 它 其 中 包含 图 像 。div 元 素 浮动 到 右 侧 
&lt;/p&gt; 
&lt;/body&gt; 
&lt;/html&gt; 
H E 





使 段落 的 首 字母 浮动 于 左 例 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
span 

{ 

float:left; 

width:0.7em; 

font-size:4009; 
font-family:algerian,courier; 
line-height : 80%; 

} 

&lt;/style&gt; 

&lt;/head&gt; 


&lt;body&gt; 

&lt;p&gt; 

&lt;span&gt;T&lt;/span&gt;his is some text. 

This is some text. This is some text. 

This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
&lt;/p&gt; 


&lt;p&gt; 
在 上 面 的 段落 中 ， 文 本 的 第 一 个 字母 包含 在 一 个 span 元 素 中 。 这 个 span 元 素 的 宽度 是 
&lt;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


|| LLL 
创建 水 平 菜单 





&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
ul 

{ 

float:left; 

width:100%; 

padding:0; 

margin:0; 
list-style-type:none; 

} 

a 

{ 

float:left; 

width:7em; 
text-decoration:none; 
color:white; 

background-color :purple; 
padding:0.2em 0.6em; 
border-right:1px solid white; 
} 

a:hover {background-color :#ff3300} 
li {display:inline} 
&lt;/style&gt; 

&lt;/head&gt; 


&lt;body&gt; 

&lt;ul&gt; 

&lt;li&gt;&lt;a href="#"&gt;Link one&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;a href="#"&gt;Link two&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;a href="#"&gt;Link three&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;a href="#"&gt;Link four&lt;/a&gt;&lt;/li&gt; 
&lt;/ul&gt; 


&lt;p&gt; 
在 上 面 的 例子 中 ， 我 们 把 ul TRA a 元 素 浮 向 左 浮动 。11 元 素 显 示 为 行内 元 素 (元 素 
&lt;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


ge — án] 
创建 无 表格 的 首页 





&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
div.container 

{ 

width:100%; 

margin: 0px; 


border:1px solid gray; 
line-height:15096; 
} 


div.header, div. footer 


padding:0.5em; 
color:white; 
background-color: gray; 
clear:left; 


} 
hi.header 


{ 
padding:0; 
margin:0; 
} 
div.left 


float:left; 
width:160px; 
margin:0; 

padding: 1em; 

} 

div.content 

{ 
margin-left:190px; 
border-left:1px solid gray; 
padding:iem; 

} 

&lt;/style&gt; 
&lt;/head&gt; 
&lt;body&gt; 


&lt;div class="container"&gt; 

&lt;div class="header"&gt;&lt;h1 class-"header'&gt;W3School.com.cné 
&lt;div class-"left'"&gt;&lt;p&gt;" Never increase, beyond what is ne 
&lt;div class="content"&gt; 

&lt;h2&gt;Free Web Building Tutorials&lt;/h2&gt; 

&lt;p&gt;At W3School.com.cn you will find all the Web-building tutt: 


from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP 
&lt;p&gt;W3School.com.cn - The Largest Web Developers Site On The ! 


&lt;div class="footer"&gt;Copyright 2008 by YingKe Investment.&lt;, 
&lt;/div&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


«| - 











定位 : 相对 定位 


&lt;html&gt; 
&lt;head&gt; 
&lt;style type="text/css"&gt; 
h2.pos left 

{ 
position:relative; 
left: -20px 

} 

h2.pos_right 

{ 
position:relative; 
left :20px 

} 

&lt;/style&gt; 
&lt;/head&gt; 


&lt;body&gt; 

&lt;h2&gt ;这 是 位 于 正常 位 置 的 标题 &lt; /h2&gt; 

&lt;h2 class="pos_left"&gt ;这 个 标题 相对 于 其 正常 位 置 向 左 移动 &1lt ; /h2&gt ; 

&lt;h2 class="pos_right"&gt; 这 个 标题 相对 于 其 正常 位 置 向 右 移动 &1t; /h2&gt ; 
&lt;p&gt ;相对 定位 会 按照 元 素 的 原始 位 置 对 该 元 素 进 行 移动 。&1t; /p&gt; 

&lt;p&gt ;样式 "left:-20px" 从 元 素 的 原始 左 侧 位 置 减 去 20 RR. &lt;/p&gt; 
&lt;p&gt; Ex "left:20px" 向 元 素 的 原始 左 侧 位 置 增加 20 RR &lt;/p&gt; 

&lt;/body&gt; 


&lt;/html&gt; 
D — 13 


定位 : 绝对 定位 


&lt;html&gt; 
&lt;head&gt; 
&lt;style type="text/css"&gt; 
h2.pos abs 

{ 
position:absolute; 
left :100px; 

top: 150px 

} 

&lt;/style&gt; 
&lt;/head&gt; 


&lt;body&gt; 

&lt;h2 class="pos_abs"&gt; 这 是 带 有 绝对 定位 的 标题 &1t;/h2&gt， 

Slt; p&gt ;通过 绝对 定位 ， 元 素 可 以 放置 到 页 面 上 的 任何 位 置 。 下 面 的 标题 距离 页 面 左 侧 
&lt;/body&gt; 


&lt;/html&gt; 








&lt;html&gt; 
&lt;head&gt; 
&lt;style type="text/css"&gt; 
p.one 

t 
position:fixed; 
left : 5px; 

top: 5px, 

j 

p.two 

{ 
position:fixed; 
top:30px; 
right:5px; 


&lt;/style&gt; 
&lt;/head&gt; 
&lt;body&gt; 


&lt;p class-z"one"&gt; —E x, &lt;/p&gt; 
&lt;p class="two"&gt; EZINE. &lt;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


如 何 使 元 素 不 可 见 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 

hi.visible {visibility:visible} 

hi.invisible {visibility:hidden} 

&lt;/style&gt; 

&lt;/head&gt; 

&lt;body&gt; 

&lt;h1 class="visible"&gt; 这 是 可 见 的 标题 &lt;/hi&gt，; 
&lt;h1 class="invisible"&gt; 这 是 不 可 见 的 标题 &1t;/h1i&gt; 
&lt;/body&gt; 


&lt;/html&gt; 


把 表格 元 素 设置 为 collapse (请 在 非 IE 的 浏览 器 中 查看 ) 


&lt;html&gt; 
&lt;head&gt; 
&lt;style type="text/css"&gt; 
tr.coll 
{ 
visibility:collapse 
} 
&lt;/style&gt; 
&lt;/head&gt; 
&lt;body&gt; 


&lt;table border="1"&gt; 
&lt;tr&gt; 
&lt;td&gt;Adams&lt;/td&gt; 
&lt;td&gt;John&lt;/td&gt; 
&lt;/tr&gt; 

&lt;tr class="coll"&gt; 
&lt;td&gt;Bush&lt;/td&gt; 
&lt;td&gt;George&lt;/td&gt; 
&lt;/tr&gt; 

&lt;/table&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


改变 光标 


&lt;html&gt; 


&lt;body&gt; 

&1t ; p&gt ;请 把 鼠标 移动 到 单词 上 ， 可 以 看 到 鼠标 指针 发 生变 化 : &1t; / p&gt; 
&lt;span style="cursor:auto"&gt; 
Auto&lt;/span&gt;&lt;br /&gt; 
&lt;span style="cursor:crosshair"&gt; 
Crosshair&lt;/span&gt;&lt;br /&gt; 
&lt;span style="cursor:default"&gt; 
Default&lt;/span&gt;&lt;br /&gt; 
&lt;span style="cursor :pointer"&gt; 
Pointer&lt;/span&gt;&lt;br /&gt; 

&lt; span style="cursor :move"&dgt 
Move&lt;/span&gt;&lt;br /&gt; 
&lt;span style-'"cursor:e-resize"&gt; 
e-resize&lt;/span&gt;&lt;br /&gt; 
&lt;span style="Cursor:ne-resize"&gt; 
ne-resize&lt;/span&gt;&lt;br /&gt; 
&lt;span style="Ccursor:nw-resize"&gt; 
nw-resize&lt;/span&gt;&lt;br /&gt; 
&lt;span style-'cursor:n-resize"&gt; 
n-resize&lt;/span&gt;&lt;br /&gt; 
&lt;span style="Ccursor:se-resize"&gt; 
se-resize&lt;/span&gt;&lt;br /&gt; 
&lt;span style="Cursor:sw-resize"&gt; 
Sw-resize&lt;/span&gt;&lt;br /&gt; 
&lt;span style-'"cursor:s-resize"&gt; 
s-resize&lt;/span&gt;&lt;br /&gt; 
&lt;span style-'cursor:w-resize"&gt; 
w-resize&lt;/span&gt;&lt;br /&gt; 
&lt;span style="cursor:text"&gt; 
text&lt;/span&gt;&lt;br /&gt; 
&lt;span style="Ccursor:wait"&gt; 
wait&lt;/span&gt;&lt;br /&gt; 
&lt;span style="cursor:help"&gt; 
help&lt;/span&gt; 

&lt;/body&gt; 


&lt;/html&gt; 


清除 元 素 的 侧面 


&lt;html&gt; 


&lt;head&gt; 
&lt;style type="text/css"&gt; 
img 


{ 
float:left; 
clear:both; 


} 
&lt;/style&gt; 
&lt;/head&gt; 
&lt;body&gt; 
&lt;img src="/i/eg_smile.gif" /&gt; 
&lt;img src="/i/eg_smile.gif" /&gt; 
&lt;/body&gt; 


&lt;/html&gt; 


CSS 分 类 属性 (Classification) 


CSS 分 类 属性 允许 你 控制 如 何 显示 元 素 ， 设 置 图 像 显示 于 另 一 元 素 中 的 何 处， 相对 
于 其 正常 位 置 来 定位 元 素 ， 使 用 绝对 值 来 定位 元 素 ， 以 及 元 素 的 可 见 度 。 


属性 描述 
clear 设置 一 个 元 素 的 侧面 是 否 允 许 其 他 的 浮动 元 素 。 


cursor 规 mU UPC ee Tey 

display ”设置 是 否 及 如 何 显示 元 素 。 

float 定义 元 素 在 哪个 方向 浮动 

position ”把 元 素 放 置 到 一 个 静态 的 、 相 对 的 、 绝 对 的 、 或 固定 的 位 置 中 。 
visibility ”设置 元 素 是 否 可 见 或 不 可 见 


CSS 导航 条 


演示 : 导航 栏 


Home 
News 
Articles 
Forum 
Contact 
About 


导航 栏 


拥有 易 用 的 导航 条 对 于 任何 网 站 都 很 重要 。 
通过 CSS， 您 能 够 把 乏味 的 HTML 菜单 转换 为 漂亮 的 导航 栏 。 


导航 栏 = 链接 列表 


导航 栏 需要 标准 的 HTML 作为 基础 。 
在 我 们 的 例子 中 ， 将 用 标准 的 HTML 列表 来 构建 导航 栏 。 
导航 栏 基本 上 是 一 个 链接 列表 ， 因 此 使 用 <ul> 和 <li> 元 素 是 非常 合适 的 : 


实例 


<ul> 

<li><a href="default.asp">Home</a></1i> 
<li><a href="news.asp">News</a></11i> 
<li><a href="contact.asp">Contact</a></1li> 
<li><a href="about.asp">About</a></1i> 
</ul> 


现在 ， 让 我 们 从 列表 中 去 掉 圆 点 和 外 边 距 : 


实例 


ul 
list-style-type:none; 


margin:0; 
padding:0; 
} 


例子 解释 : 


e list-style-type:none - 删除 圆 点 。 导 航 栏 不 需要 列表 项 标记 。 
e 把 外 边 距 和 内 边 距 设置 为 0 可 以 去 除 浏览 器 的 默认 设 定 。 


以 上 例子 中 的 代码 是 用 在 垂直 、 水 平 导 航 栏 中 的 标准 代码 。 


垂直 导航 栏 


如 需 构建 垂直 导航 栏 ， 我 们 只 需要 定义 «a» 元 素 的 样式 ， 除 了 上 面 的 代码 之 外 : 
实例 


a 


{ 
display:block; 
width:60px; 


例子 解释 : 

e display:block - 把 链接 显示 为 块 元 素 可 使 整个 链接 区 域 可 点 击 (不 仅仅 是 文 
A) ， 同 时 也 人 允许 我 们 规定 宽度 。 

e width:60px - 块 元 素 默 认 占 用 全 部 可 用 宽度 。 我 们 需要 规定 60 像素 的 宽度 。 

提示 : 请 同时 看 一 看 我 们 完整 样式 的 导航 栏 实例 。 


注释 : 请 始终 规定 垂直 导航 栏 中 <a> 元 素 的 宽度 。 如 果 省 略 宽度 ，IE6 会 产生 意 想 
不 到 的 结果 。 


水 平 导航 栏 


有 两 种 创建 水 平 导 航 栏 的 方法 。 使 用 行内 或 浮动 列表 项 。 
两 种 方法 都 不 错 ， 但 是 如 果 您 希望 链接 拥有 相同 的 尺寸 ， 就 必须 使 用 浮动 方法 。 


行内 列表 项 
除了 上 面 的 "标准 "代码 ， 构 建 水 平 导航 栏 的 方法 之 一 是 将 <li> 元 素 规定 为 行内 元 


7IN * 


实例 


li 


display:inline; 


例子 解释 : 


display:inline; - AA 3b, «li» 元 素 是 块 元 素 。 在 这 里 ， 我 们 去 除了 每 个 列表 项 前 后 
的 换行 ， 以 便 让 它们 在 一 行 中 显示 。 


提示 : 请 看 一 下 我 们 完整 祥 式 的 水 平 导航 栏 实 例 。 


对 列表 项 进行 浮动 
在 上 面 的 例子 中 ， 链 接 的 宽度 是 不 同 的 。 
为 了 让 所 有 链接 拥有 相等 的 宽度 ， 浮 动 <li> 元 素 并 规定 <a> 元 素 的 宽度 : 


实例 


li 


{ 
float:left; 
} 


a 


{ 
display:block; 
width:60px; 


例子 解释 : 


e float:left - 使 用 float 来 把 块 元 素 滑 向 彼此 。 

e display:block - 把 链接 显示 为 块 元 素 可 使 整个 链接 区 域 可 点 击 (不 仅仅 是 文 
A) ， 同 时 也 人 允许 我 们 规定 宽度 。 

e width:60px - 由 于 块 元 素 默 认 占 用 全 部 可 用 宽度 ， 链 接 无 法 滑动 至 彼此 相 邻 。 
我 们 需要 规定 60 像素 的 宽度 。 


W3School Html & Css 教程 


提示 : 请 看 一 下 我 们 完整 样式 的 水 平 导 航 栏 实例 。 


CSS 导航 条 
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CSS 图 片 库 


CSS 可 用 来 创建 图 片 库 。 


Jn BR: CSS 图 图 F È 


Bt 
wc 
CY 
a 
E 
r3 
A 
In: 
AR 
TEE 
cT 
HB 
id 





像 的 描述 ND tb s X e og RN m 
添加 对 图 像 的 描述 
图 片 库 


下 面 的 图 片 库 是 由 CSS 创建 的 : 
实例 


<!doctype html> 

«html» 

«head» 

«style» 

div.img 
1 H 
margin:3px; 
border:1px solid #bebebe; 
height:auto; 
width:auto; 
float:left; 
text-align:center; 
} 


div.img img 


1 
display:inline; 
margin:3px; 
border:1px solid #bebebe; 
} 

div.img a:hover img 
{ 
border:1px solid #333333; 
} 

div.desc 
{ 
text-align:center; 
font-weight :normal; 
width:150px; 
font-size:12px; 
margin:10px 5px 10px 5px; 


</style> 
</head> 
<body> 


<div class="img"> 
<a target="_blank" hrefz"/i/tulip ballade.jpg'» 
<img src="/i/tulip_ballade_s.jpg" alt="Ballade" width="160" heigl 
</a> 
<div class="desc"> 在 此 处 添加 对 图 像 的 描述 </div> 
</div> 


<div class="img"> 
<a target="_blank" href="/i/tulip_flaming_club.jpg"> 
<img src="/i/tulip_flaming_club_s.jpg" alt="Ballade" width="160" 
</a> 
«div class="desc"> 在 此 处 添加 对 图 像 的 描述 </div> 
</div> 


<div class="img"> 
<a target="_blank" href="/i/tulip_fringed_family.jpg"> 
<img src="/i/tulip_fringed_family_s.jpg" alt="Ballade" width="16( 
</a> 
«div class="desc"> 在 此 处 添加 对 图 像 的 描述 </div> 
</div> 


<div class="img"> 
<a target="_blank" href="/i/tulip_peach_blossom.jpg"> 
<img src="/i/tulip_peach_blossom_s.jpg" alt="Ballade" width="160' 
</a> 
<div class="desc"> 在 此 处 添加 对 图 像 的 描述 </div> 
</div> 


</body> 
</html> 
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CSS ARERR 


通过 CSS 创建 透明 图 像 是 很 容易 的 。 
注释 : CSS opacity 属性 是 W3C CSS 推荐 标准 的 一 部 分 。 


亲自 试 一 试 - 实例 
创建 透明 图 像 - Hover 效果 


&lt; DOCTYPE html&gt; 

&lt;html&gt; 

&lt;head&gt; 

&lt;style&gt; 

img 

( . 

opacity:0.4; 

filter:alpha(opacity-40); /* For IE8 and earlier */ 
} 

img:hover 

{ 

opacity:1.0; 

filter:alpha(opacity-100); /* For IE8 and earlier */ 
} 

&lt;/style&gt; 

&lt;/head&gt; 

&lt;body&gt; 


&1t ;h1&gt ;图 像 透 明度 &Lt;/h1&gt ; 
&lt;img src="/i/tulip_peach_blossom_w_s.jpg" alt="Peach Blossom" /é 
&lt;p&gt;&lt;b&agt; FH : &lt;/b&gt;ft IE 中 ， 必 须 添加 &1t; !DOCTYPE&gt;, 


&lt;/body&gt; 
&lt;/html&gt; 


创建 文本 在 背景 图 像 上 的 透明 框 





&lt; IDOCTYPE html&gt; 
&lt;html&gt; 
&lt;head&gt; 
&lt;style&gt; 
div.background 


{ 
width: 400px; 


height: 266px; 
margin:15px; 
background: url('/i/tulip_peach_blossom_w.jpg') no-repeat; 
border: 1px solid black; 
j 


div.transbox 

{ 
width: 338px; 
height: 204px; 
margin: 30px; 
padding:0; 
background-color: #fffffFf; 
border: 1px solid black; 
"icone! cH sua 
filter:alpha(opacity-60); 
/* CSS3 standard */ 
opacity:0.6; 

j 


div.transbox p 
{ 
margin: 30px 40px; 
color: #000000; 
font:bold 12px Verdana, Geneva, sans-serif; 
line-height :1.5; 


&lt;/style&gt; 
&lt;/head&gt; 


&lt;body&gt; 


&lt;div class="background"&gt; 

&lt;div class="transbox"&gt; 

&lt;p&gt; 

This is some text that is placed in the transparent box. 
This is some text that is placed in the transparent box. 
This is some text that is placed in the transparent box. 
This is some text that is placed in the transparent box. 
This is some text that is placed in the transparent box. 
&lt;/p&gt; 

&lt;/div&gt; 

&lt;/div&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


M 


实例 1 - 创建 透明 图 像 


定义 透明 效果 的 CSS3 属性 是 opacity。 


首先 ， 我 们 将 展示 如 何 通 过 CSS 来 创建 透明 图 像 。 
常规 图 像 : 








请 看 下 面 的 CSS: 
img 


opacity:0.4; 
filter:alpha(opacity-40); /* 针对 IES 以 及 更 早 的 版 本 */ 
} 


IE9, Firefox, Chrome, Opera 和 Safari 使 用 属性 opacity ik EAA. opacity 属 
性 能 够 设置 的 值 从 0.0 到 1.0。 值 越 小 ， 越 透明 。 


IES 以 及 更 早 的 版 本 使 用 滤 镜 filter:alpha(opacity-x), x 能 够 取 的 值 从 0 到 100。 
值 越 小 ， 越 透明 。 


实例 2 - 图 像 透明 度 - Hover 效果 


请 把 鼠标 指针 移动 到 图 像 上 : 





CSS 是 这 样 的 : 


img 

{ 

opacity:0.4; 

filter:alpha(opacity-40); /* 针对 IE8 以 及 更 早 的 版 本 */ 
ee 

{ 


opacity: 1:20; 
filter:alpha(opacity=100); /* 针对 IES 以 及 更 时 的 版 本 */ 
} 


第 一 个 CSS 代码 块 类 似 实例 1 中 的 人 代码。 此外， 我 们 已 经 设置 了 当 妃 标 指针 位 于 
图 像 上 时 的 样式 。 在 这 个 例子 中 ， 当 指针 移动 到 图 像 上 时 ， 我 们 希望 图 像 是 不 透明 
的 。 


对 应 的 CSS 是 : opacity=1, 
IE8 以 及 更 早 的 浏览 器 filter:alpha(opacity=100). 
当 妃 标 指针 移出 图 像 后 ， 图 像 会 再 次 透明 。 


实例 3 - 透明 框 中 的 文本 


This is some text that is placed in the transparent box. This is some text that is 
placed in the transparent box. This is some text that is placed in the transparent 
box. This is some text that is placed in the transparent box. This is some text that 
is placed in the transparent box. 


源 代 码 是 这 样 的 : 


«IDOCTYPE html» 

«html» 

«head» 

«style» 

div.background 

{ 
width: 400px; 
height: 266px; 
background: url('/i/tulip peach blossom w.jpg') no-repeat; 
border: 1px solid black; 

} 


div.transbox 

{ 
width: 338px; 
height: 204px; 
margin: 30px; 
background-color: Zffffff; 
border: 1px solid black; 
22 Oe Les a7 
filter:alpha(opacity-60); 
/* CSS3 standard */ 
opacity:0.6; 

} 


div.transbox p 
{ 
margin: 30px 40px; 
} 
</style> 
</head> 


<body> 


<div class="background"> 

<div class="transbox"> 

<p> 

This is some text that is placed in the transparent box. 
This is some text that is placed in the transparent box. 
This is some text that is placed in the transparent box. 
This is some text that is placed in the transparent box. 
This is some text that is placed in the transparent box. 
</p> 

</div> 

</div> 


</body> 
</html> 


首先 ， 我 们 创建 一 个 div 元 素 (class="background")， 它 有 固定 的 高 度 和 宽度 、 背 
景 图 像 ， 以 及 边框 。 然 后 我 们 在 第 一 个 div AEDH div 
(class="transbox")。"transbox" div 有 固定 的 宽度 、 背 景色 和 边框 - 并 且 它 是 透明 
的 。 在 透明 div 内 部 ， 我 们 在 p 元 素 中 加 入 了 一 些 文本 。 


相关 页 面 


CSS 参考 手册 : CSS3 opacity 属性 


CSS2 媒介 类 型 


媒介 类 型 (Media Types) 人 允许 你 定义 以 何 种 媒介 来 提交 文档 。 文 档 可 以 被 显示 在 显 
示 器 、 纸 媒介 或 者 听觉 浏览 器 等 等 。 


媒介 类 型 


XE CSS 属性 仅仅 被 设计 为 针对 某 些 媒 介 。 上 比方 说 "voice-family" 属性 被 设计 为 针 
对 听觉 用 户 终端 。 其 他 的 属性 可 被 用 于 不 同 的 媒介 。 例 如 ，"font-size" 属性 可 被 用 
于 显示 器 以 及 印刷 媒介 ， 但 是 也 许 会 带 有 不 同 的 值 。 显 示 器 上 面 的 显示 的 文档 通常 
会 需要 比 纸 媒介 文档 更 大 的 字号 ， 同 时 ， 在 显示 器 上 ，sSans-serif 字体 更 易 阅 读 ， 
而 在 纸 媒介 上 ，serif 字体 更 易 阅读 。 


@media 规 则 
(media 规则 使 你 有 能 力 在 相同 的 样式 表 中 ， 使 用 不 同 的 样式 规则 来 针对 不 同 的 媒 


介 。 


下 面 这 个 例子 中 的 样式 告知 浏览 器 在 显示 器 上 显示 14 像素 的 Verdana 字体 。 但 是 
假如 页 面 需要 被 打印 ， 将 使 用 10 个 像素 的 Times 字体 。 注 意 : font-weight 被 设置 
为 粗 体 ， 不 论 显示 器 还 是 纸 媒介 : 


<html> 
<head> 


<style> 
@media screen 


p.test {font-family:verdana, sans-serif; font-size:14px} 


} 
@media print 


p.test {font-family:times,serif; font-size:10px} 


} 

@media screen,print 
ene (font-weight:bold) 
d 

</head> 


<body>... . </body> 


</html> 


不 同 的 媒介 类 型 


注释 : 媒介 类 型 名 称 对 大 小 写 不 敏感 。 


媒介 类 型 描述 
all 用 于 所 有 的 媒介 设备 。 
aural 用 于 语音 和 音频 合成 器 。 
braille 用 于 盲人 用 点 字 法 触觉 回馈 设备 。 


embossed ”用 于 分 页 的 盲人 用 点 字 法 打印 机 。 
handheld 用 于 小 的 手持 的 设备 。 


print 用 于 打印 机 。 

projection 用 于 方案 展示 ， 比 如 幻灯 片 。 

screen 用 于 电脑 显示 器 。 

tty 用 于 使 用 固定 密度 字母 栅 格 的 媒介 ， 上 比如 电 传 打字 机 和 终端 。 


tv 用 于 电视 机 类 型 的 设备 。 
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CSS 注意 事项 


本 节 列 出 了 在 使 用 CSS 时 尽量 避免 使 用 的 技术 。 


Internet Explorer Behaviors 


_ 它 是 什么 ?_Internet Explorer 5 引入 了 行为 (behaviors), behaviors 是 一 种 通过 
使 用 CSS 向 HTML 元 素 添 加 行为 的 方法 。 


为 什么 要 避免 它 ? 只 有 Internet Explorer 支持 behavior 属性 。 
用 什么 代替 ? 请 使 用 JavaScript 和 HTML DOM 取而代之 。 


例子 1 - Mouseover Highlight 
下 面 的 HTML 文件 中 有 一 个 <style> 元 素 ， 它 为 <h1> 元 素 定义 了 一 个 行为 : 


«html» 

«head» 

«style type="text/css"> 

hi ( behavior: url(behave.htc) } 
</style> 

</head> 


<body> 
<hi>Mouse over me! !!</h1> 
</body> 
</html> 


下 面 是 XML 文档 "behave.htc'" : 


«attach for="element" event="onmouseover" handler="hig_lite" /> 
«attach for="element" event="onmouseout" handler="low_lite" /> 


<script type="text/javascript"> 
function hig_lite() 


element.style.color='red'; 


} 


function low_lite() 


element.style.color='blue'; 


} 


</script> 


behavior 文件 包含 了 针对 元 素 的 JavaScript 和 事件 句柄 。 
如 果 您 使 用 Internet Explorer， 可 以 亲自 试 一 下 (把 鼠标 放 在 例子 中 的 文本 上 ) 。 


例子 2 - Typewriter Simulation 


下 面 的 HTML 文件 中 有 一 个 «style» TR, CH id 7j "typing" 的 元 素 定 义 了 一 个 行 
为 : 


«html» 
«head» 
«style type="text/css"> 
#typing 


behavior :url(behave_typing.htc); 
font-family: 'courier new'; 


} 
</style> 
</head> 


<body> 

<span id="typing" speed="100">IE5 introduced DHTML behaviors. 
Behaviors are a way to add DHTML functionality to HTML elements 
with the ease of CSS.<br /><br />How do behaviors work?<br /> 
By using XML we can link behaviors to any element in a web page 
and manipulate that element.</p> 

</span> 

</body> 

</html> 


下 面 是 XML 文档 "behave.htc'" : 


«attach for="window" event="onload" handler="beginTyping" /> 
<method name="type" /> 


<script type="text/javascript"> 
var i,texti, text2, textLength,t; 


function beginTyping( ) 

t 

1-0; 

texti=element.innerText; 

textLength-text1.length; 

element.innerText=""; 

text2=""; 
t=window.setInterval(element.id+".type()",speed); 


} 


function type() 


{ 
text2=text2+text1.substring(i,i+1); 


element.innerText=text2; 
I= ide 
if (i==textLength) 

{ 


clearInterval(t); 
} 
} 


</script> 


如 果 您 使 用 Internet Explorer， 可 以 亲自 试 一 下 。 


CSS 高 级 


CSS3 简介 


CSS3 完全 向 后 兼容 ， 因 此 您 不 必 改 变现 有 的 设计 。 浏 览 器 通常 支持 CSS2。 


CSS3 模块 


CSS3 被 划分 为 模块 。 
其 中 最 重要 的 CSS3 模块 包括 : 


选择 名 

框 模 型 
背景 和 边框 
文本 效果 
2D/3D 转换 
动画 

多 列 布局 
用 户 界 面 


CSS3 标准 


W3C 仍然 在 对 CSS3 规范 进行 开发 。 
不 过 ， 现 代 浏 览 器 已 经 实现 了 相当 多 的 CSS3 属性 。 


CSS3 边框 


CSS3 边框 

通过 CSS3， 您 能 够 创建 圆 角 边框 ， 向 矩形 添加 阴影 ， 使 用 图 片 来 绘制 边框 - 并 且 
不 需 使 用 设计 软件 ， 比 如 PhotoShop。 

TAEA, KEFA TF A HERE : 


e border-radius 
e box-shadow 
e border-image 


浏览 器 文 持 


属性 浏览 器 支持 
border-radius 
box-shadow 
border-image 
Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性 。 
Firefox、Chrome 以 及 Safari 支持 所 有 新 的 边框 属性 。 
注释 : 对 于 border-image，Safari 5 以 及 更 老 的 版 本 需要 前 级 -webkit-。 
Opera 支持 border-radius 和 box-shadow 属性 ， 但 是 对 于 border-image 需要 前 级 


ides 
CSS3 AA WIE 


在 CSS2 中 添加 圆 角 算 形 需 要 技巧 。 我 们 必须 为 每 个 圆 角 使 用 不 同 的 图 片 。 
在 CSS3 中 ， 创 建 圆 角 是 非常 容易 的 。 

在 CSS3 中 ，border-radius 属性 用 于 创建 圆 角 : 

这 个 和 矩形 有 圆 角 哦 ! 


实例 
向 div TRAA 圆 角 : 


div 


border:2px solid; 
border-radius:25px; 
-moz-border-radius:25px; /* Old Firefox */ 


CSS3 边框 阴影 
在 CSS3 中 ，box-shadow 用 于 向 方 框 添加 阴影 : 
实例 
向 div 元 素 添加 方 框 阴影 : 
div 


{ 
box-shadow: 10px 10px 5px #888888; 
} 


CSS3 边框 图 片 
通过 CSS3 的 border-image 属性 ， 您 可 以 使 用 图 片 来 创建 边框 : 
border-image 属性 允许 您 规定 用 于 边框 的 图 片 ! 
用 于 创建 上 面 的 边框 的 原始 图 片 : 





* 


实例 


使 用 图 片 创建 围绕 div 元 素 的 边框 : 


div 

1 

border-image:url(border.png) 30 30 round; 
-moz-border-image:url(border.png) 30 30 round; /* #@& Firefox */ 
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chro 
-o-border-image:url(border.png) 30 30 round; /* Opera */ 

} 








KII = 
新 的 边框 属性 
属性 描述 CSS 
border-image 设置 所 有 border-image-* 属性 的 简写 属性 。 3 
border-radius 设置 所 有 四 个 border-*-radius 属性 的 简写 属性 。 3 


box-shadow 向 方 框 添加 一 个 或 多 个 阴影 Ho 3 


CSS3 背景 


CSS3 背景 
CSS3 包含 多 个 新 的 背景 属性 ， 它 们 提供 了 对 背景 更 强大 的 控制 。 
在 本 章 ， 您 将 学 到 以 下 背景 属性 : 


e background-size 
e background-origin 


您 也 将 学 到 如 何 使 用 多 重 背 景 图 片 。 
浏览 器 支持 


属性 浏览 器 支持 
background-size 


background-origin 


Internet Explorer 9+, Firefox, Chrome, Safari 以 及 Opera 支持 新 的 背景 属性 。 


CSS3 background-size 属性 


background-size 属性 规定 背景 图 片 的 尺寸 。 


在 CSS3 之 前 ， 背 景 图 片 的 尺寸 是 由 图 片 的 实际 尺寸 决定 的 。 在 CSS3 中 ， 可 以 规 
定 背 景 图 片 的 尺寸 ， 这 就 允许 我 们 在 不 同 的 环境 中 重复 使 用 背景 图 片 。 


您 能 够 以 像素 或 百分比 规定 尺寸 。 如 果 以 百分比 规定 尺寸 ， 那 么 尺寸 相对 于 父 元 素 
的 宽度 和 高 度 。 


例子 1 
调整 背景 图 片 的 大 小 : 


div 


1 

background:url(bg flower.gif); 
-moz-background-size:63px 100px; /* 老 版 本 的 Firefox */ 
background-size:63px 100px; 
background-repeat:no-repeat; 


} 
例子 2 
对 背景 图 片 进 行 拉 伸 ， 使 其 完成 填充 内 容 区 域 : 
div 
{ 


background:url(bg flower.gif); 
-moz-background-size:40% 100%; /* 老 版 本 的 Firefox */ 
background-size:40% 100%; 
background-repeat:no-repeat; 


j 


CSS3 background-origin 属性 


background-origin 属性 规定 背景 图 片 的 定位 区 域 。 
背景 图 片 可 以 放置 于 content-box、padding-box 或 border-box 区 域 。 





border-box 





实例 


在 content-box 中 定位 背景 图 片 : 


div 

{ 

background: url(bg_flower.gif); 
background-repeat:no-repeat; 
background-size:100% 100%; 


-webkit -background-origin:content-box; /* Safari */ 
background-origin: content - box; 


} 


CSS3 多 重 育 景 图 片 

CSS3 允许 您 为 元 素 使 用 多 个 背景 图 像 。 
实例 

为 body 元 素 设 置 两 幅 背 景 图 片 : 


body 


X 
background-image:url(bg flower.gif),url(bg flower 2.gif); 
} 


新 的 背景 属性 


属性 描述 css 
background-clip 规定 背景 的 绘制 区 域 。 3 
background-origin 规定 背景 图 片 的 定位 区 域 。 3 
background-size 规定 背景 图 片 的 尺寸 。 3 


CSS3 文本 效果 
CSS3 文本 效果 


CSS3 包含 多 个 新 的 文本 特性 。 
在 本 章 中 ， 您 将 学 到 如 下 文本 属性 : 


e text-shadow 
e word-wrap 


浏览 器 文 持 


属性 浏览 器 支持 
text-shadow 


word-wrap 


Internet Explorer 10, Firefox, Chrome, Safari 以 及 Opera 支持 text-shadow 属 


l 
o 


所 有 主流 浏览 器 都 支持 word-wrap 属性 。 
注释 : Internet Explorer 9 以 及 更 早 的 版 本 ， 不 支持 text-shadow 属性 。 


CSS3 文本 阴影 

在 CSS3 中 ，text-shadow 可 向 文本 应 用 阴影 。 
MAAS ! 

您 能 够 规定 水 平 阴影 、 垂 直 了 阴影、 模糊 距离 ， 以 及 阴影 的 颜色 : 
实例 

向 可 标 是 题 添 aN JD 阴影 


hi 


{ 
text-shadow: 5px 5px 5px #FF0000; 
} 


CSS3 目 动 换行 
单词 太 长 的 话 就 可 能 无 法 超出 某 个 区 域 : 


This paragraph contains a very long word: 
thisisaveryveryveryveryveryverylongword. The long word will break and wrap to 
the next line. 


在 CSS3 中 ，word-wrap 属性 允许 您 允许 文本 强制 文本 进行 换行 - 即使 这 意味 着 会 
对 单词 进行 拆 分 : 
This paragraph contains a very long word: 


thisisaveryveryveryveryveryverylongword. The long word will break and wrap to 
the next line. 


下 面 是 CSS 代码 : 


实例 
允许 对 长 单词 进行 拆 分 ， 并 换行 到 下 一 行 : 


p (word-wrap:break-word; } 


新 的 文本 属性 


AJ[2Q wc 
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属性 


hanging- 
punctuation 


punctuation-trim 


text-align-last 


text-emphasis 


text-justify 


text-outline 
text-overflow 
text-shadow 
text-wrap 


word-break 


word-wrap 


rQAQdNQ X -J- zslr EH 
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IVI 


描述 
规定 标点 字符 是 否 位 于 线 框 之 外 。 


规定 是 否 对 标点 字符 进行 修剪 。 

设置 如 何 对 齐 最 后 一 行 或 紧 挨 着 强制 换行 符 之 前 
的 行 。 

向 元 素 的 文本 应 用 重点 标记 以 及 重点 标记 的 前 景 


o 


规定 当 text-align 设置 为 justify" 时 所 使 用 的 对 齐 
方法 。 


规定 文本 的 轮廓 。 

规定 当 文 本 渝 出 包含 元 素 时 发 生 的 事情 。 
向 文本 添加 阴影 。 

规定 文本 的 换行 规则 。 

规定 非 中 日 韩文 本 的 换行 规则 。 


允许 对 长 的 不 可 分 割 的 单词 进行 分 割 并 换行 到 下 
=iTe 


CSS 
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CSS3 字体 
通过 CSS3, Web 设计 师 再 也 不 必 被 迫使 用 “web-safe” 字 体 了 。 


CSS3 @font-face 规则 


在 CSS3 之 前 ，web 设计 渍 必须 使 用 已 在 用 户 计算 机 上 安装 好 的 字体 。 
通过 CSS3，web 设计 羡 可 以 使 用 他 们 喜欢 的 任意 字体 。 


当 您 您 找到 或 购买 到 希望 使 用 的 字体 时 ， 可 将 该 字体 文件 存放 到 web 服务 器 上 ， 它 
会 在 需要 时 被 自动 下 载 到 用 户 的 计算 机 上 。 


您 “自己 的 "的 字体 是 在 CSS3 @font-face 规则 中 定义 的 。 


浏览 器 文 持 


属性 浏览 器 支持 
@font-face 


Firefox, Chrome, Safari 以 及 Opera 支持 .ttf (True Type Fonts) 和 .otf 
(OpenType Fonts) 类 型 的 字体 。 


Internet Explorer 9+ 支持 新 的 @font-face 规则 ， 但 是 仅 支持 .eot 类 型 的 字体 
(Embedded OpenType)。 


注释 : Internet Explorer 8 以 及 更 早 的 版 本 不 支持 新 的 @font-face 规则 。 


使 用 您 需要 的 字体 


在 新 的 @font-face 规则 中 ， 您 必须 首先 定义 字体 的 名 称 (比如 myFirstFont) ， 然 
后 指向 该 字体 文件 。 


如 需 为 HTML 元 素 使 用 字体 ， 过 font-family 属性 来 引用 字体 的 名 称 
(myFirstFont) : 


实例 


<style> 
Qfont-face 


{ 

font-family: myFirstFont; 

src: Url(' Sansation Light.ttf')， 
url('Sansation Light.eot'); /* IE9+ */ 

j 


div 
font-family:myFirstFont; 


j 
</style> 


使 用 粗 体 字 体 


您 必须 为 粗 体 文本 添加 另 一 个 包含 描述 符 的 @font-face : 
实例 


Qfont-face 


{ 

font-family: myFirstFont; 

src: url('Sansation Bold.ttf'), 
url('Sansation Bold.eot'); /* IE9+ */ 

font-weight:bold; 


j 


Xt "Sansation Bold.ttf" 是 另 一 个 字体 文件 ， 它 包含 了 Sansation 字体 的 粗 体 字 


‘So 


只 要 font-family 7; "myFirstFont" 的 文本 需要 显示 为 粗 体 ， 浏 览 器 就 会 使 用 该 字 
体 。 


通过 这 种 方式 ， 我 们 可 以 为 相同 的 字体 设置 许多 @font-face 规则 。 


CSS3 F(A fan FT 


下 面 的 表格 列 出 了 能 够 在 @font-face 规则 中 定义 的 所 有 字体 描述 符 : 


font- 
stretch 


font- 
style 


font- 
weight 


unicode- 
range 


值 
name 


URL 


normal condensed ultra-condensed 
extra-condensed semi-condensed 
expanded semi-expanded extra- 
expanded ultra-expanded 


ormal italic oblique 


normal bold 100 200 300 400 500 600 
700 800 900 


unicode-range 


必需 。 定 义 字体 文件 
的 URL。 


可 选 。 定 义 如 何 拉 伸 
字体 。 默 认 是 
"normal"。 


可 选 。 定 义 字 体 的 祥 
Tho MUE 
"normal". 

可 选 。 定 义 字 体 的 粗 
细 。 默 认 是 
"normal", 


Wit, XE FARK 
的 UNICODE 字符 范 
围 。 默 认 是 "U+0- 
10FFFF"。 


CSS3 2D 转换 


CSS3 转换 
通过 CSS3 转换 ， 我 们 能 够 对 元 素 进 行 移 动 、 缩 放 、 转 动 、 拉 长 或 拉 伸 。 
它 如 何 工 作 ? 


转换 是 使 元 素 改变 形状 、 尺 寸 和 位 置 的 一 种 效果 。 
您 可 以 使 用 2D 或 3D 转换 来 转换 您 的 元 素 。 


浏览 器 文 持 


属性 浏览 器 支持 
transform 
Internet Explorer 10、Firefox 以 及 Opera 支持 transform 属性 。 
Chrome 和 Safari 需要 前 级 -webkit-。 


注释 : Internet Explorer 9 需要 前 级 -ms-。 


2D 转换 
在 本 章 中 ， 您 将 学 到 如 下 2D 转换 方法 : 


e translate() 
e rotate() 
e scale() 
e skew() 
e matrix() 


您 将 在 下 一 章 学 习 3D 转换 。 


实例 


div 


{ 

transform: rotate(30deg); 

-ms-transform: rotate(30deg); JT SEO SA 
-webkit-transform: rotate(30deg); /* Safari and Chrome */ 
-o-transform: rotate(30deg); /* Opera */ 
-moz-transform: rotate(30deg); /* Firefox */ 

} 


translate() 方法 


通过 translate) 方法 ， 元 素 从 其 当前 位 置 移动 ， 根 据 给 定 的 left (x 坐标 ) 和 
top (y 坐标 ) 位 置 参数 : 


实例 
div 
{ 
transform: translate(50px,100px); 
-ms-transform: translate(50px,100px); ZT IE 0 *4 
-webkit-transform: translate(50px,100px); /* Safari and Chrome : 
-o-transform: translate(50px,100px); /* Opera */ 
-moz-transform: translate(50px,100px); /* Firefox */ 
} 





值 translate(50px, 100px) 把 元 素 从 左 侧 移动 50 像素 ， 从 顶端 移动 100 像素 。 


rotate() 方法 
通过 rotate() 方法 ， 元 素 顺 时 针 旋转 给 定 的 角度 。 人 允许 负 值 ， 元 素 将 逆 时 针 旋 转 。 


实例 


div 

{ 

transform: rotate(30deg); 

-ms-transform: rotate(30deg); fe TESg 5 
-webkit-transform: rotate(30deg); /* Safari and Chrome */ 
-o-transform: rotate(30deg); /* Opera */ 
-moz-transform: rotate(30deg); /* Firefox */ 


j 


{4 rotate(30deg) 把 元 素 顺 时 针 旋 转 30 RE, 


scale() 方法 


通过 scale() 方法 ， 元 素 的 尺寸 会 增加 或 减少 ， 根 据 给 定 的 宽度 (X 轴 ) 和 高 度 (Y 
i) BR: 


实例 
div 
{ 
transform: scale(2,4); 
-ms-transform: scale(2,4); VARTER 
-webkit-transform: scale(2,4); /* Safari 和 Chrome */ 
-o-transform: scale(2,4); /* Opera */ 
-moz-transform: scale(2,4); /* Firefox */ 
} 


44 scale(2,4) 把 宽度 转换 为 原始 尺寸 的 2 倍 ， 把 高 度 转换 为 原始 高 度 的 4 倍 。 


skew() 方法 


通过 skew() 方法 ， 元 素 翻 转 给 定 的 角度 ， 根 据 给 定 的 水 平 线 (X4) MEER (Y 
tn) 参数 : 


实例 


div 

{ 

transform: skew(30deg, 20deg); 

-ms-transform: skew(30deg, 20deg); TEROR 


-webkit-transform: skew(30deg, 20deg); /* Safari and Chrome */ 
-o-transform: skew(30deg, 20deg); /* Opera */ 

-moz-transform: skew(30deg,20deg); /* Firefox */ 

} 


值 skew(30deg,20deg) 围绕 X 轴 把 元 素 翻 转 30 度 ， 围 绕 Y 轴 翻 转 20 度 。 


matrix() 方法 


matrix() 方法 把 所 有 2D 转换 方法 组 合 在 一 起 。 


matrix() 方法 需要 六 个 参数 ， 包 含 数学 函数 ， 人 允许 您 : 旋转 、 缩 放 、 移 动 以 及 倾斜 
元 素 。 


实例 


如 何 使 用 matrix 方法 将 div 元 素 旋转 30 Æ : 


div 

{ 

transform:matrix(0.866,0.5,-0.5,0.866,0,0); 
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); o TETOR: 


-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */ 
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari ar 
-o-transform:matrix(0.866,0.5, -0.5,0.866,0,0); /* Opera */ 
} 


Eo 


新 的 转换 属性 
下 面 的 表格 列 出 了 所 有 的 转换 属性 : 





属性 描述 CSS 
transform 向 元 素 应 用 2D 或 3D 转换 。 3 
transform-origin 允许 你 改变 被 转换 元 素 的 位 置 。 3 


2D Transform 方法 


matrix(n,n,n,n,n,n) 定义 2D 转换 ， 使 用 六 个 值 的 矩阵 。 
translate(x,y) 定义 2D 转换 ， 治 着 X 和 YY 轴 移 动 元 束 。 
translateX(n) 定义 2D 转换 ， 治 着 X 轴 移 动 元 素 。 
translateY(n) 定义 2D 转换 ， 治 着 Y 轴 移 动 元 素 。 
scale(x,y) 定义 2D 缩放 转换 ， 改 变 元 素 的 宽度 和 高 度 。 
scaleX(n) 定义 2D 缩放 转换 ， 改 变 元 素 的 宽度 。 
scaleY(n) 定义 2D 缩放 转换 ， 改 变 元 素 的 高 度 。 
rotate(angle) 定义 2D 旋转 ， 在 参数 中 规定 角度 。 
skew(x-angle,y-angle) 定义 2D 倾斜 转换 ， 治 着 X AY 轴 。 
skewX(angle) 定义 2D 倾斜 转换 ， 治 着 X 轴 。 


skewY(angle) 定义 2D 倾斜 转换 ， 治 着 Y 轴 。 


CSS3 3D 转换 


3D 转换 
CSS3 人 允许 您 使 用 3D 转换 来 对 元 素 进行 格式 化 。 
在 本 章 中 ， 您 将 学 到 其 中 的 一 些 3D 转换 方法 : 


e rotateX() 
e rotateY() 


点 击 下 面 的 元 素 ， 来 查看 2D 转换 与 3D 转换 之 间 的 不 同 之 处 : 
2D 旋转 
3D 旋转 


它 如 何 工 作 ? 

转换 是 使 元 素 改 变形 状 、 尺 寸 和 位 置 的 一 种 效果 。 
您 可 以 使 用 2D 或 3D 转换 来 转换 您 的 元 素 。 
浏览 器 支持 


属性 浏览 器 支持 


transform 


Internet Explorer 10 和 Firefox 支持 3D 转换 。 
Chrome 和 Safari 需要 前 级 -webkit-。 


Opera 仍然 不 支持 3D 转换 ( 它 只 支持 D 转换 ) 。 
rotateX() 方法 
通过 rotateX() 方法 ， 元 素 围 绕 其 X 轴 以 给 定 的 度数 进行 旋转 。 


实例 


div 
1 
transform: rotateX(120deg); 


-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */ 


-moz-transform: rotateX(120deg); /* Firefox */ 


} 


rotateY() 旋转 
通过 rotateY() 方法 ， 元 素 围 绕 其 Y 轴 以 给 定 的 度数 进行 旋转 。 


实例 


div 
{ 
transform: rotateY(130deg); 


-webkit-transform: rotateY(130deg); /* Safari # Chrome */ 


-moz-transform: rotateY(130deg); /* Firefox */ 


} 


转换 属性 
下 面 的 表格 列 出 了 所 有 的 转换 属性 : 


属性 描述 
transform 向 元 素 应 用 2D 或 3D 转换 。 
transform-origin 允许 你 改变 被 转换 元 素 的 位 置 
transform-style 规定 被 启 套 元 素 如 何在 3D 空间 中 显示 。 
perspective 规定 3D 元 素 的 透视 效果 。 
perspective-origin 规定 3D 元 素 的 底部 位 置 


backface-visibility 定义 元 素 在 不 面 对 屏 幕 时 是 否 可 见 。 


2D Transform 方法 


CSS 


C CO wo Ww WwW C 


EE 


matrix3d(n,n,n,n,n,n, 
n,n,n,n,n,n,n,n,n,n) 


translate3d(x,y,Z) 
translateX(x) 
translateY(y) 
translateZ(z) 


scale3d(x,y,Z) 


scaleX(x) 
scaleY(y) 


scaleZ(z) 


rotate3d(x,y,z,angle) 
rotateX(angle) 
rotateY (angle) 
rotateZ(angle) 
) 


perspective(n 


描述 
定义 3D 转换 ， 使 用 16 个 值 的 4x4 JB 
阵 。 
定义 3D 转化 。 
定义 3D 转化 ， 仅 使 用 用 于 X 轴 的 值 。 
定义 3D 转化 ， 仅 使 用 用 于 Y 轴 的 值 。 
定义 3D 转化 ， 仅 使 用 用 于 Z 轴 的 值 。 
定义 3D 缩放 转换 。 


定义 3D 缩放 转换 ， 通 过 给 定 一 个 X dh 
的 值 。 


定义 3D 缩放 转换 ， 通 过 给 定 一 个 Y 轴 
的 值 。 


定义 3D 缩放 转换 ， 通 过 给 定 一 个 Z ín 
的 值 。 


定义 3D 旋转 。 

定义 治 X 轴 的 3D 旋转 。 
定义 治 Y 轴 的 3D 旋转 。 
定义 治 Z 轴 的 3D 旋转 。 

定义 3D 转换 元 素 的 透视 视图 。 


CSS3 过 小 


CSS3 过 渡 


通过 CSS3， 我 们 可 以 在 不 使 用 Flash 动画 或 JavaScript 的 情况 下 ， 当 元 素 从 一 种 
样式 变换 为 A 种 样式 时 为 元 素 添加 效果 。 


请 把 鼠标 移动 到 下 面 的 元 素 上 : 
CSS3 过 渡 


浏览 器 支持 


属性 浏览 器 支持 
transition 
Internet Explorer 10、Firefox、Chrome 以 及 Opera 支持 transition 属性 。 
Safari 需要 前 级 -webkit-。 
注释 : Internet Explorer 9 以 及 更 早 的 版 本 ， 不 支持 transition 属性 。 
注释 : Chrome 25 以 及 更 早 的 版 本 ， 需 要 前 级 -webkit-。 


它 如 何 工 作 ? 
CSS3 过 渡 是 元 素 从 一 种 祥 式 逐渐 改变 为 另 一 种 的 效果 。 


要 实现 这 一 点 ， 必 须 规 定 两 项 内 容 : 


e 规定 您 系 希 望 把 效果 添加 到 哪个 CSS 属性 上 
e 规定 效果 的 时 长 


实例 
应 用 于 宽度 属性 的 过 渡 效 果 ， 时 长 为 2 秒 : 


div 


{ 

transition: width 2s; 

-moz-transition: width 2s; /* Firefox 4 */ 
-webkit-transition: width 2s; /* Safari 和 Chrome */ 
-o-transition: width 2s; /* Opera */ 

} 


注释 : 如 果 时 长 未 规定 ， 则 不 会 有 过 渡 效 果 ， 因 为 默认 值 是 0。 


效果 开始 于 指定 的 CSS 属性 改变 值 时 。CSS 属性 改变 的 典型 时 间 是 鼠标 指针 位 于 
元 素 上 时 : 


实例 
SUES Suni BEF <div> 元 素 上 时 : 


div:hover 


{ 
width:300px; 
j 


注释 : 当 指 针 移 出 元 素 时 ， 它 会 逐渐 变 回 原来 的 样式 。 


多 项 改变 

如 需 向 多 个 样式 添加 过 渡 效 果 ， 请 添加 多 个 属性 ， 由 逗号 隔 开 : 

实例 

头 

向 宽度 、 高 度 和 转换 添加 过 渡 效 果 : 
div 
{ 
transition: width 2s, height 2s, transform 2s; 
-moz-transition: width 2s, height 2s, -moz-transform 2s; 
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; 


-o-transition: width 2s, height 2s,-o-transform 2s; 


j 


过 渡 属 性 
下 面 的 表格 列 出 了 所 有 的 转换 属性 : 


属性 描述 


transition 


transition-property 规定 应 用 过 渡 的 CSS 属性 的 名 称 。 
transition-duration 定义 过 渡 效 果 花 费 的 时 间 。 默 认 是 0。 
transition-timing- mins BEA E > Bh En 
function 规定 过 渡 效 果 的 时 间 曲线 。 默认 是 ease" o 
transition-delay 规定 过 渡 效 果 何 时 开始 。 默 认 是 0. 


下 面 的 两 个 例子 设置 所 有 过 渡 属 性 : 


实例 
在 一 个 例子 中 使 用 所 有 过 渡 属 性 : 


div 

{ 

transition-property: width; 
transition-duration: 1s; 
transition-timing-function: linear; 
transition-delay: 2s; 

/* Firefox 4 */ 
-moz-transition-property:width; 
-moz-transition-duration:1s; 
-moz-transition-timing-function: linear; 
-moz-transition-delay:2s; 

/* Safari 和 Chrome */ 
-webkit-transition-property:width; 
-webkit-transition-duration:1s; 
-webkit-transition-timing-function:linear; 
-webkit-transition-delay:2s; 

/* Opera */ 
-o-transition-property:width; 
-o-transition-duration:1s; 
-o-transition-timing-function: linear; 
-o-transition-delay:2s; 


} 


实例 
与 上 面 的 例子 相同 的 过 渡 效 果 ， 但 是 使 用 了 简写 的 transition 属性 : 


div 

{ 

transition: width 1s linear 2s; 

/* Firefox 4 */ 

-moz-transition:width 1s linear 2s; 

/* Safari and Chrome */ 
-webkit-transition:width 1s linear 2s; 
/* Opera */ 

-o-transition:width 1s linear 2s; 


} 


CSS3 动 田 


CSS3 #16 

通过 CSS3， 我 们 能 够 创建 动画 ， 这 可 以 在 许多 网 页 中 取代 动画 图 片 、Flash 动画 
以 及 JavaScript。 

CSS3 动力 


CSS3 @keyframes 规则 


如 需 在 CSS3 中 创建 动画 ， 您 需要 学 习 Gkeyframes 规则 。 


@keyframes 规则 用 于 创建 动画 。 在 @keyframes 中 规定 某 项 CSS 样式 ， 就 能 创 
建 由 当前 样式 逐 淅 改 为 新 样式 的 动画 效果 。 


浏览 器 支持 


属性 浏览 器 支持 
@keyframes 


animation 


Internet Explorer 10, Firefox 以 及 Opera 支持 @keyframes 规则 和 animation & 


l 
o 


Chrome 和 Safari 需要 前 级 -webkit-。 


注释 : Internet Explorer 9， 以 及 更 早 的 版 本 ， 不 支持 @keyframe 规则 或 
animation 属性 。 


实例 


@keyframes myfirst 

{ 

from {background: red;} 
to {background: yellow;} 
} 


@-moz-keyframes myfirst /* Firefox */ 


{ 

from {background: red;} 

to {background: yellow;} 

} 

@-webkit-keyframes myfirst /* Safari 和 Chrome */ 
{ 

from (background: red; } 

to (background: yellow; } 

} 

@-o-keyframes myfirst /* Opera */ 


d 

from (background: red;j 
to (background: yellow; } 
} 


CSS3 动 转 


当 您 在 @keyframes 中 创建 动画 时 ， 请 把 它 捆 绑 到 某 个 选择 器 ， 否 则 不 会 产生 动画 
效果 。 


至 少 以 下 两 项 CSS3 动画 属性 ， 即 可 将 动画 绑 定 到 选择 器 : 
动 


实例 


把 "myfirst" 动画 捆绑 到 div 元 素 ， 时 长 :5 秒 : 


div 

{ 

animation: myfirst 5s; 

-moz-animation: myfirst 5s; /* Firefox */ 
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */ 
-o-animation: myfirst 5s; /* Opera */ 


} 


注释 : 您 必须 定义 动画 的 名 称 和 时 长 。 如 果 忽 略 时 长 ， 则 动画 不 会 允许 ， 因 为 默认 
值 是 0。 


什么 是 CSS3 中 的 动画 ? 
动画 是 使 元 素 从 一 种 样式 逐渐 变化 为 另 一 种 样式 的 效果 。 


您 可 以 改变 任意 多 的 样式 任意 多 的 次 数 。 


请 用 百分比 来 规定 变化 发 生 的 时 间 ， 或 用 关键 词 "from" 和 "to"， 等 同 于 0% 和 
100%. 


0% 是 动画 的 开始 ，100% 是 动画 的 完成 。 
为 了 得 到 最 佳 的 浏览 器 支持 ， 您 应 该 始终 定义 0% 和 100% 选择 器 。 
实例 


当 动 画 为 25% 及 50% 时 改变 背景 色 ， 然 后 当 动 画 100% 完成 时 再 次 改变 : 


@keyframes myfirst 

{ 

0% (background: red;} 
25% (background: yellow; } 
50% (background: blue; } 
100% (background: green; } 
} 


@-moz-keyframes myfirst /* Firefox */ 
{ 

0% (background: red; } 

25% (background: yellow; } 

50% (background: blue; } 

100% (background: green; } 

j 


Q-webkit-keyframes myfirst /* Safari 和 Chrome */ 
{ 

0% (background: red; } 

25% (background: yellow; } 

50% (background: blue; } 

100% (background: green; } 

j 


Q-o-keyframes myfirst /* Opera */ 
{ 

0% (background: red; } 

25% (background: yellow; } 

50% (background: blue; } 

100% (background: green; } 

} 


实例 


改变 背景 色 和 位 置 : 


@keyframes myfirst 


{ 

0% 
25% 
50% 
75% 
100% 
} 


(background: 
(background: 
(background: 
(background: 
(background: 


red; left:Opx; top:0px;} 
yellow; left:200px; top:0px;} 
blue; left:200px; top:200px; } 
green; left:Opx; top:200px; } 
red; left:Opx; top:0px;) 


@-moz-keyframes myfirst /* Firefox */ 


{ 

0% 
25% 
50% 
75% 
100% 
j 


(background: 
(background: 
(background: 
(background: 
(background: 


red; left:Opx; top:0px;) 
yellow; left:200px; top:0px;) 
blue; left:200px; top:200px; } 
green; left:Opx; top:200px; } 
red; left:Opx; top:0px;) 


Q-webkit-keyframes myfirst /* Safari 和 Chrome */ 


d 

0% 
25% 
50% 
75% 
100% 
} 


{background: 
{background: 
{background: 
{background: 
(background: 


red; left:Opx; top:Opx;) 
yellow; left:200px; top:0px;) 
blue; left:200px; top:200px;) 
green; left:Opx; top:200px; } 
red; left:Opx; top:0px;) 


Q-o-keyframes myfirst /* Opera */ 


{ 

0% 
25% 
50% 
75% 
100% 
} 
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{background: 
{background: 
{background: 
{background: 
{background: 


red; left:Opx; top:0px;} 
yellow; left:200px; top:0px;) 
blue; left:200px; top:200px;) 
green; left:Opx; top:200px; } 
red; left:Opx; top:0px;) 


下 面 的 表格 列 出 了 @keyframes 规则 和 所 有 动画 属性 : 
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属性 描述 CSS 
@keyframes 规定 动画 3 
T 所 有 动画 属性 的 简写 属性 ， 除 了 animation- 3 

play-state 属性 。 
animation-name 规定 @keyframes 动画 的 名 称 。 3 
NE ‘= IS 
animation-duration Fin TANAAN RRE., BRIA g 
animation-timing- "T bs > pp En 
a 规定 动画 的 速度 曲线 。 默 认 是 "ease", 3 
animation-delay 规定 动画 何 时 开始 。 黑 认 是 0。 3 
animalon-teration- 规定 动画 被 播放 的 次 数 。 默 认 是 1。 3 
CE 二 AS — FEE S b.) E 
人 规定 动画 是 否 在 下 周期 逆向 地 播放 。 默 认 是 3 
normal", 

animation-play- 规定 动画 是 否 正 在 运行 或 暂停。 默认 是 3 
state "running". 
animation-fill-mode ”规定 对 象 动画 时 间 之 外 的 状态 。 3 

下 面 的 两 个 例子 设置 了 所 有 动画 属性 : 

实例 

头 


运行 名 为 myfirst 的 动画 ， 其 中 设置 了 所 有 动画 属性 : 


div 

{ 

animation-name: myfirst; 
animation-duration: 5s; 
animation-timing-function: linear; 
animation-delay: 2s; 
animation-iteration-count: infinite; 
animation-direction: alternate; 
animation-play-state: running; 
Z^cREYCOfOXS 07 

-moz-animation-name: myfirst; 
-moz-animation-duration: 5s; 
-moz-animation-timing-function: linear; 
-moz-animation-delay: 2s; 
-moz-animation-iteration-count: infinite; 
-moz-animation-direction: alternate; 
-moz-animation-play-state: running; 

/* Safari 和 Chrome: */ 
-webkit-animation-name: myfirst; 
-webkit-animation-duration: 5s; 
-webkit-animation-timing-function: linear; 
-webkit-animation-delay: 2s; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-direction: alternate; 
-webkit-animation-play-state: running; 
/* Opera: */ 

-O-animation-name: myfirst; 
-O-animation-duration: 5s; 
-O-animation-timing-function: linear; 
-O-animation-delay: 2s; 
-O-animation-iteration-count: infinite; 
-O-animation-direction: alternate; 
-O-animation-play-state: running; 


} 


实例 
与 上 面 的 动画 相同 ， 但 是 使 用 了 简写 的 动画 animation 属性 : 


div 

{ 

animation: myfirst 5s linear 2s infinite alternate; 

/* Firefox: */ 

-moz-animation: myfirst 5s linear 2s infinite alternate; 

/* Safari 和 Chrome: */ 

-webkit-animation: myfirst 5s linear 2s infinite alternate; 
/* Opera: */ 

-O-animation: myfirst 5s linear 2s infinite alternate; 


} 


W3School Html & Css 教程 


CSS3 动力 401 


CSS3 多 列 


CSS3 多 列 


通过 CSS3， 您 能 够 创建 多 个 列 来 对 文本 进行 布局 - 就 像 报纸 那样 ! 
在 本 章 中 ， 您 将 学 习 如 下 多 列 属性 : 


e column-count 
e column-gap 
e column-rule 


浏览 器 文 持 


属性 浏览 器 支持 
column-count 
column-gap 


column-rule 
Internet Explorer 10 和 Opera 支持 多 列 属性 。 
Firefox 需要 前 级 -moz-。 
Chrome 和 Safari 需要 前 级 -webkit-。 


注释 : Internet Explorer 9 以 及 更 时 的 版 本 不 支持 多 列 属性 。 


CSS3 创建 多 列 
column-count 属性 规定 元 素 应 该 被 分 隔 的 列 数 : 


实例 
把 div 元 素 中 的 文本 分 隔 为 三 列 : 


div 

{ 

-moz-column-count:3; /* Firefox */ 
-webkit-column-count:3; /* Safari 和 Chrome */ 
column-count:3; 


} 


CSS3 规定 列 之 间 的 间隔 
column-gap 属性 规定 列 之 间 的 间隔 : 


实例 


规定 列 之 间 40 像素 的 间隔 : 


div 

{ 

-moz-column-gap:40px; /* Firefox */ 
-webkit-column-gap:40px; /* Safari 和 Chrome */ 
column-gap:40px; 

} 


CSS3 列 规则 
column-rule 属性 设置 列 之 间 的 宽度 、 样 式 和 颜色 规则 。 


实例 


规定 列 之 间 的 宽度 、 样 式 和 颜色 规则 : 


div 

{ 

-moz-column-rule:3px outset #ff0000; /* Firefox */ 
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */ 
column-rule:3px outset #ff0000; 

} 


二 -AA 


新 的 多 列 属性 
下 面 的 表格 列 出 了 所 有 的 转换 属性 : 
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属性 措 述 CSS 
column-count 规定 元 素 应 该 被 分 隔 的 列 数 。 3 
column-fill 规定 如 何 填 充 列 。 3 
column-gap 规定 列 之 间 的 间隔 。 3 
column-rule 设置 所 有 column-rule-* 属性 的 简写 属性 。 3 
column-rule- eo : 

nee 规定 列 之 间 规 则 的 颜色 。 3 
column-rule- 规定 列 之 间 规 则 的 样式 。 3 
style 

r- 规定 列 之 间 规 则 的 宽度 。 3 
column-span 规定 元 素 应 该 横 跨 的 列 数 。 3 
column-width 规定 列 的 宽度 。 3 
COPIE n column-width 和 column-count 的 简写 属 3 
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在 CSS3 中 ， 新 的 用 户 界面 特性 包括 重 设 元 素 尺 寸 、 盒 尺寸 以 及 轮 请 等 。 
在 本 章 中 ， 您 将 学 到 以 下 用 户 界 面 属 性 : 
e resize 


e box-sizing 
e outline-offset 


浏览 器 文 持 


属性 浏览 器 支持 
resize 
box-sizing 
outline-offset 
Firefox、Chrome 以 及 Safari 支持 resize 属性 。 


Internet Explorer, Chrome, Safari 以 及 Opera 支持 box-sizing BM. Firefox 需 
要 前 级 -moz-。 


所 有 主流 浏览 器 都 支持 outline-offset 属性 ， 除 了 Internet Explorer。 
CSS3 Resizing 


在 CSS3，resize 属性 规定 是 否 可 由 用 户 调整 元 素 尺 寸 。 

这 个 div 元 素 可 由 用 户 调整 尺寸 (在 Firefox 4+、Chrome 以 及 Safari 中 ) 。 
CSS 代码 如 下 : 

实例 

规定 div 元 素 可 由 用 户 调整 大 小 : 


div 


resize:both; 
overflow: auto; 


} 


CSS3 Box Sizing 


box-sizing 属性 允许 您 以 确切 的 方式 定义 适应 某 个 区 域 的 具体 内 容 。 


实例 


规定 两 个 并 排 的 带 边框 方 框 : 


div 

{ 

box-sizing: border -box; 

-moz -box-sizing: border -box; /* Firefox */ 
-webkit-box-sizing:border-box; /* Safari */ 


width:50%; 
float:left; 


CSS3 Outline Offset 


outline-offset RTE x146 Bp st 119 2, HEEE E 2 HE 3h 2 BAI E 2 80 £6 ER 
轮廓 与 边框 有 两 点 不 同 : 


。 轮廓 不 占用 空间 
。 轮廓 可 能 是 非 矩 形 


这 个 div 在 边框 之 外 15 像素 处 有 一 个 轮廓 。 
CSS 代码 如 下 : 
实例 


规定 边框 边缘 之 外 15 像素 处 的 轮廓 : 


div 


border:2px solid black; 
outline:2px solid red; 
outline-offset:15px; 


新 的 用 户 界面 属性 
下 面 的 表格 列 出 了 所 有 的 转换 属性 : 


属性 
appearance 


box-sizing 
icon 


nav-down 
nav-index 
nav-left 
nav-right 
nav-up 


outline- 
offset 


resize 


描述 
允许 您 将 元 素 设置 为 标准 用 户 界 面 元 素 的 外 观 
允许 您 以 确切 的 方式 定义 适应 某 个 区 域 的 具体 内 容 。 
ee 
规定 在 使 用 arrow-down 导航 键 时 向 何 处 导航 。 
设置 元 素 的 tab 键 控 制 次 序 。 
规定 在 使 用 arrow-left 导航 键 时 向 何 处 导航 。 
规定 在 使 用 arrow-right 导航 键 时 向 何 处 导航 。 
规定 在 使 用 arrow-up 导航 键 时 向 何 处 导航 。 


对 轮廓 进行 偏 移 ， 并 在 超出 边框 边缘 的 位 置 绘制 轮廓 。 


规定 是 否 可 由 用 户 对 元 素 的 尺寸 进行 调整 。 


CSS 
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Firebug 教程 


什么 是 Firebug ? 


Firebug 是 一 个 开源 的 web 开 发 工具 。 
在 本 章 教 程 我 们 将 讨论 以 下 内 容 : 


e 如 何 安装 Firebug. 

e 使 用 Firebug 检查 和 编辑 HTML. 
使 用 Firebug 检查 和 编辑 CSS。 
使 用 Firebug 调试 JavaScript。 

在 Firebug 中 动态 执行 JavaScript. 
使 用 Firebug 记录 Javascript 日 志 。 
使 用 Firebug 监控 网 络 。 


安装 Firebug 


Firebug 下 载 地 址 : https://addons.mozilla.org/en-US/firefox/addon/1843/ 


使 用 Firefox 浏 览 器 访问 以 上 下 载 地 址 ， 打 开 页 面 后 ， 点 击 下 载 按 钮 后 ， 会 有 个 弹 窗 
页 面 ， 提 示 安 装 的 目录 ， 安 装 后 重启 你 的 Firefox 浏 览 器 。 


重启 后 就 可 以 在 Firefox 浏 览 器 中 看 到 Firebug 的 图 标 。 点 击 Firebug 图 标 (位 于 Firefox 
浏览 器 右上 角 ) 即 可 激活 Firebug 插 件 。 





J c [a] - BE <Ctrl+K> P ~- D- A 多 ~ "ul æl 
Search w3cschool cc: (El 
BS... (QQidi 论 群 : 71358470 ) 


离线 版 下 载 图 on 


Firebug 组 件 


Firebug 选项 
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| 





Firebug UI Location 
Deactivate Firebug for This Site Shift+F12 


Open With Editor 

Text Size 

Options 

Firebug Online 

Inspect Element Ctrl+Shift+C 
Profile JavaScript Ctrl+Shift+P 
Command Line Ctrl+Shift+L 
Search Ctrl+F 
Customize Shortcuts Ctrl+Shift+Alt+B 
About... 1.9.0 


&2Fwww.w3resource.com&xdm c-default5542&xdm p-1&"» 


/body> 


ml> 


在 页 面 上 点 击 检查 元 素 


(9 


"| E «div class="logo"> 








tional//EN" "http://www.w3.org/TR 


bsap"» 


provider" frameborder-"0" 
der" style-"position: 
p://mediacdn.disqus.com 
ps3At2F 








| Edit | a < lilinkz < ul < div#menu < div#main < body < html 


由 «div id-"bsap 1263115" class-"bsap 1263115 bsap"> 
由 «div class="nevber"> 
日 <div id="main"> 


日 <div id="menu"> 
B <ul> 
由 <li class="first"> 
由 <li class="home"> 


<li class="heedlink">VWFirebug</li> 


由 <li> 
B <li class="linkz"> 


<a href="/web-development-tools/inspect-and-edit- 
HIML-with-Firebug.php"» Inspect and edit HTML with 





</li> 





Show command line 


Firebug 教程 


Computed Layout DOM 
-tn { style.css (line 35) ^. 
background- 
color: #404041; 
color: #FFFFFF; | 
margin: auto auto Spx 
-20px; 


padding-bottom- 5px; 
text-align: left; 


m 


} 


ul, html.css (line 569) 
menu, «System» 
dir { 


-moz-padding- 

start: 40px; 

display: block; 
list-style-type: disc; 





mergin: temo; 
} 
address, html.css (line 63) 
article, «System» 
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面板 选择 






Console liv&main < body < html 
HTML NE MEE 














由 «div class-"logo 
由 «div id-"bsap 12 
由 «div class-"navb 
日 <div id-"main"» 
<div id-"men 
日 <div id="cont 


63115 bsap"> 


«|[«|[«|«|«|« 


E «div id=" Show All Panels 





Console Panel is disabled 


Use Firebug's status bar icon to enable/disable all panels at once. Use each panel's tab 


menu for individual control. | Consol(*) 


Enable «3 Click here to enable 








HTML 面板 






Show Full Text 
Show White Space 
Show Comments 






€» | Edit | div#writeup < div#content < 
cTYPE html PUBLIC "-//W3C//DTD XHTML 
L xmlns="http: //www.w3.org/1999/xh 
head» 

body» 

lk «script type="text/javascript"> 
由 «script» 

由 <ul class="tn"> 

由 «div class="logo"> 

由 «div id-"bsap 1263115" class-"bsa 
由 «div class-"navbar"» 

日 <div id="main"> 

<div id="menu"> 


CSS 面板 








Show Basic Entities 





Highlight Changes 
Expand Changes 






Scroll Changes Into View 






Shade Box Model 
Show Quick Info Box 
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Expand Shorthand Properties 





Source Edit ~ style.css 7 








body { Refresh 
background-color: #FFFFFF; 
font-family: verdanae,helvetica, arial, sans-serif; 
margin: 0; 

padding: 0; 


} 
img { 
border-style: none; 
vertical-align: middle; 
} 


img a:link { 
border: 0 none; 
text-decoration: none; 


img a:visited { 
border: 0 none; 
text-decoration: none; 















i | all | like.php?channel_url=https%3A%2F%... 7 Enabled 
















1 <!DOCTYPE html» Show chrome sources 

2 <html lang="en" id="facebook" class="no 

3 <head><meta charset="utf-8" /><script>< Track Throw/Catch ty 
| 4 hi,h2,h3,h4,h5,hé{font-size: 13px;color v Show Break Notifications 

5, hi{font-size: 14px} 

6 h4,hS{font-size: 11px} 

7. p(margin:lem 0} 

8 a([(cursor:pointer;color:£$3b5998;-moz-outline-style:none;text-decoratior 

35. a:hover[text-decoration-:underline] 

10| img(border:0] 





Show User-defined Properties 
Show User-defined Functions 
Object { userStat Show DOM Properties 
null Show DOM Functions 
"Mozilla/5.0 (W Show DOM Constants 


c——— Show Inline Event Handlers 
Object { chili="v1" 


false Show Own Properties Only 


Object { } Show Enumerable Properties Only 
0 











Refresh 


[ function(), f 
Stoplteration { } 
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网 络 面板 (用 于 网 页 测速 和 优化 ) 








由 GET ql9vukDC« 
由 GET sprite2.pn 
由 GET pqDuxm 1 
由 GET def.htmls 
由 GET reply.html 
由 GET add-imagt 
由 GET upload.htr 
由 GET xd proxy. 
由 GET quant.js 
由 GET beacon.js 
由 GET ga.js 

=Œ GET lib.js 

由 GET lib.js 

由 GET  utm.gif: 
= GET pixel;r-11 
由 GET b?c1-7&c 


static.ak. fbcdn.net 

static.ak. fbcdn.net 

ssl.gstatic.com 
200 C static.ak.fbcdn.net 
200 OK mediacdn.disqus.com 
200 OK mediacdn.disqus.com 
200 OK mediacdn.disqus.com 
200 OK mediacdn.disqus.com 
200 OK s-static.ak.fbcdn.net 
304 Not Modified edge.quantserve.com 


200 OK b.scorecardresearch.com 


google-analytics.com 
200 OK mediacdn.disqus.com 
2 4 mediacdn.disqus.com 


200 OK google-analytics.com 
204 No Content pixel.quantserve.com 
204 No Content b.scorecardresearch.com 


e 1 - 最 小 化 Firebug。 
e 2 -在 浏览 器 窗口 安装 Firebug。 
e 3 - 停 用 Firebug。 
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Disable Browser Cache 


Show Paint Events 


124. 124.40. 17:80 
124.124.40. 17:80 
124.124.40. 17:80 
124. 124.40. 17:80 
118.214.45.177:443 
96.17.181.8:80 
195.59.44.17:80 


124. 124.40. 17:80 
74.125.236.96:80 


203. 190. 124. 14:80 
195.59.44. 17:80 








Nl 456ms 

MEE 774: 

ll 347ms 

— 488ms 

E 1.235 
má 449ms 
EN 572»: 


END 107: 
a) E 
M 198ms 
MN 557»: 
— 548ms 
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使 用 Firebug 查 看 和 编辑 HTML 和 CSS 
在 本 章节 的 教程 中 ， 我 们 将 讨论 如 何 使 用 Firebug 查 看 和 编辑 HTML 和 CSS。 


使 用 Firebug 查 看 和 编辑 HTML 


在 你 要 查看 的 元 素 上 右 击 鼠标 然后 点 Inspect Element( 查 看 元 素 ). 





The following pictorial shows left hand side of the Firebug when opened. 
Each component is marked with a number and that what that component do 


is described w.r.t. number. 





aa iq > | [| Consolev | HIML CSS Script DOM Net 
PR pre mes Om FT ns rp re re ee | 


; S] «| consoie ( m > CSS Script DOM Net 













giis 








$ e 





z3 | Edit | h2.heading < div#writeup < div#content < div#main < body < html 
<p> rou can aowniosd ana install Firepug rrom " 3 
https://addons.mozilla.org/en-US/firefox/addon/1843/. </p> í style.css (line 415) 
B <p> | border-bottom: lpx solid #666666; 
p | color: #000000; 

















<p>At this stage firebug is not activited. If you click that icon, Ls] Posrt-f du wardana ee mama 
Firebug will get activated. </p> | d = " z - 
5 up xy x || serif; 
<h2 class="heading">Components of a Firebug h2> | E 
a " — anis m s m | font-size: 13pt; 
<p>The following pictorial shows left hand side of the Firebug when | 
z B 7 | margin-bottom: 8px; 

opened. Each component is marked with a number and that what that | in iatt- dm 
component do is described w.r.t. number. </p> ES] KE RES ARE 

= 本 = M | margin-top: 2px; 

um -一 一 一 一 一 一 ——————M - (ou uve eoo "| padding-bottom: Spx; - 

















<h2 class-"heading"»Components of a Firebug </h2>| 


修改 代码 <h1>Components of Firebug</h1> . 





Components of Firebug 


The following pictorial shows left 上 
Each component is marked with a 
is described w.r.t. number. 


Lk 
ar b | b e | 


i | le ersi 





at zx S$ ? 


=) -| Console | HTML» | CSS Script DOM Net 





<> [east] | Edit || h2.heading < —— diurcontent < divémain < body < html 
*hl»Components of Firebug-c/h1l» 


你 只 要 在 Firebug 窗 口上 修改 代码 就 能 实时 的 查看 修改 后 代码 在 浏览 器 上 的 显示 效 
果 ， 你 也 可 以 复制 代码 到 你 的 HTML 文 件 中 。 


使 用 Firebug 查 看 和 编辑 Css 


-a a aun 百 点 击 Inspect Element( 查 看 元 素 )。 如 下 图 所 示 点 击 样 
文件 





g [zl uen e 
eh) < > I) "| Console | HTML | CSS Script DOM Net (^ - : a ea 
43 | Edit | hl < div#content < divémain < body < html Style | Computed Layout DOM 

z dis  inzmccpavpRE T ^||h1 { Click this to edit CSS code E syleess (line 398) 
border-bottom: 1ipx solid #666666; 


J <div id="main"> 
color: $2255AA; 
font-family: verdana,helvetica,arial,sans- 
||| serif; 
font-size: 14pt; 
margin-bottom: 15px; 
margin-left: 4px; 

—— es margin-top: -3px; 

Ram ——— "n (05^ || padding-bottom: 5px; —— —  — ç 


由 «div id="menu"> 
z «div id-"content"» 





由 «div id-" writeup"> 
由 <p> 


EU. Sivas w3resource.com | online web tutorials" src="/images/site.png"> œ 








通过 修改 代码 为 color:red; 来 修改 标题 颜色 
修改 完成 后 你 可 以 马上 看 到 修改 后 的 效果 。 
现在 你 可 以 复制 修改 后 的 样式 ， 取 代 原 有 的 代码 并 保存 ， 使 之 生效 : 
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Hom __Ť_kInspect and edit CSS with Firebug 
¥ Firebug Tutorials 
Firebug Tutorials Right click on the element which you want to inspet 


Inspect Element. 


____Insnect and edit HTML with 
a ui > [B] consore HTML | css” | Script DOM 





hi 
border-bottom: 1px solid #666666; 
@ color: red; 
font-family: verdana, helvetica, arial, sans-serif; 
font-size: 14pt; 
margin-bottom: 15px; 
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使 用 Firebug 调试 JavaScript 


fe aah 

Firebug 是 一 个 非常 强大 的 工具 ， 可 以 帮助 您 发 现代 码 发 现 错误 的 错误 并 解决 错误 。 
在 此 我 们 使 用 Firebug 来 处 理 Javascript 代 码 。 

首先 我 们 需要 加 载 页 面 并 打开 Firebug。 

有 时 候 您 需要 重新 载 和 页面。 


在 状态 栏 的 错误 数 


© 1 Error 





显示 当前 页 面 的 错误 


"e| € > | com | HTML CSS Script DOM Net 
ie | Clear Persist Profile on) Errors Warnings Info Debug Info 
€ syntax error 

var b=; 


显示 错误 的 详细 信息 





Watch * | Stack — Breakpoints 


New watch expression... 





| > 


由 this Window for-in-statement-example2.htm! 

由 Components nsXPCComponents { 
interfaces-nsXPCComponents Interfaces , 
interfacesBylD-nsXPCComponents Interfa: 

由 applicationCache 0 items in offline cache 


m 


dosed false 
由 console Object { firebug="1.6.1" } 
constructor Window { } 
由 content Window for-in-statement-example2.html 
由 controllers XULControllers { constructor=XULControll 
由 crypto Crypto { constructor=Crypto, version=": 
enable SmartCardEvents=false } 
defaultStatus "e 
由 directories BarProp { constructor=BarProp, visible= 
由 document Document for-in-statement-example2 html 
frameElement Er] - 





4 | "m | + 
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一 步 步 调试 代码 
你 可 以 一 步 步 的 执行 代码 。 这 对 代码 调试 非常 有 用 。 





























ROSE AT. epeetan, 
ee) < > = i MANSIS | HTML [Sciptv | DOM | Net 
| all + | for-in-statement-example2.html - Ee Pa. 
1; <!DOCTYPE html PUBLIC "-//W3C//DID XHTML 1.0 Transitional//EN" ^ 
2, "http-//www.w3.org/TR/xhtm11/DTD/xhtmll-transitional.dtd"» E 
3, «html xmlns-"http-//www.w3.org/1999/xhtml" xml:lang-"en" lang="en"> 
4. «head» 
S «meta http-equiv-"content-type" content-"text/html; charset=iso-8859-1" /> 
6, «title»JavaScript for in statement : Example-1</title> 4 
7 </head> = 
8. <body> 
3 «hl style="color: red">JavaScript : for in statement </hi> 
10; <hr /> : 
> 11 <script type-"text/javascript"» E 
12] /* 
13, function demo() 
14! ( 
15 var key, strl - ""; 
16 // Initialize object. 
17, var student = { 
18 name : "David Rayy", 
19 Cinsa : "Y 
2 rolinn - 12 v 
4 t 





使 用 断 点 调试 


断 点 调试 可 以 终止 代码 的 执行 ， 你 可 以 通过 指定 代码 范围 来 查看 错误 是 不 是 在 指定 
代码 范围 内 。 这 对 于 错误 调试 很 有 用 。 


如 果 你 点 击 "Step over ( 单 步 跳 过 ) " 按钮 , Firebug 会 更 新 所 有 变量 直到 你 在 右 侧 
窗口 中 终止 断 点 执行 。 




















ae "| < >|= 1+] | Console HTML CSS | Scripty | DOM Net 
ig | all- VIUERE EN TENNIS for-in-s...le2.html p» 0.1 
1, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ^ 
2, "http://www.w3.org/TR/xhtm11/DTD/xhtmll-transitional.dtd"- 
3, «html xmlns-"http://www.w3.org/1999/xhtml" xml:lang-"en" lang="en"> 
4, <head> 
5, «meta http-equiv-"content-type" content-"text/html; charset-iso-8859-1" /> 
6, <title>JavaScript for in statement :  Example-1-/title» J 
7 </head> ^ 
8 <body> 
9 «hl style="color: red"»JavaScript : for in statement </h1> 
10| <hr /> Step 
(QQ 11 <script type="text/javascript"> Over | | 
124] /* 
3| function demo() 
4i { 
15 var key, stri = ""; 


16 // Initialize object. 


Use BreakPoint to stop execution Step Info 


ES P" 





n rolino - 17 
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使 用 表达 式 让 断 点 工作 
你 可 以 写 一 个 表达 式 ， 在 条 件 为 真 时 ， 断 点 会 停止 代码 的 执行 。 










we pq ME Console HTML HE ovi" HOM Net 
aj aly for-in-statemenit-example? html * 


1| «!DOCTYPE html PUBLIC "-//W3C//DID XHTML 1.0 Transitional//EN" _ 












OCA 


2, "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"» 

3 <html xmlns-"http-://www.w3.org/1999/xhtml" xml:lang-"en" lang="en"> 

4 <head> 

S «meta http-equiv-"content-type" content-"text/html; charset-iso-8859-1" /> 
6 <title>JavaScript for in statement : Example-1</title> 








] ; <script. type-"text/javascript"» 


12] /* 

13! function demo() 

14! i 

15 var key, strl - ""; 
16 // Initialize object. 


17. var student = { 
18 name : "David Rayy", 





19 class - " V*, 
20!  rollno - 12 T 
UNS HEN STEIN NERS eA LG We Uc Agus Nase rsd ure agg Se rsd Sue | 


搜索 
你 可 以 使 用 快速 搜索 来 查找 代码 中 的 关键 字 。 
B —— .— .— 0 x] 
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Firebug 页 面 概况 查看 


使 用 Firebug 的 概况 ， 你 可 以 测试 Web 页 面 导 致 延迟 加 载 的 文件 。 
通过 打开 页 面 Firebug > Console (控制 台 ) > Profile (概况 ) 。 
你 需要 重新 加 载 页 面 ， 然 后 点 击 " 概 况 "查看 页 面 载 人 情况 。 
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Firebug # A i477 JavaScript 


您 可 以 使 用 Firebug 来 编写 并 实时 执行 一 个 JavaScript。 


这 是 为 了 测试 ， 并 确保 该 脚本 工作 正常 ， 这 是 将 JavaScript 代 码 部 署 在 生产 环境 前 
的 好 方法 。 


打开 Firebug > Script( 脚 本 ) > 显示 命 信行， 代码 如 下 所 示 : 


alert("w3cschool.cc") 












<html xmlns4 http://waw. w3. org/1999/xhtml" lang-"zh-CN'» 


<head> 





E <meta hame-"keywords" content=""3cschool, HTML, CSS, PHP, DOM, JavaScr 
4 | " | 


® Warning: Enabling the Script panel causes a Firefox slow-down due to a pls 


3 >>> alert ("wScschool. cc”) 


按 Enter 键 后 ， 马 上 你 就 能 看 到 代码 的 输出 。 如 图 所 示 : 
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w3cschool. cc 








wR < > Bl- eua HTML css |MÁ - | DOM 网 络 Cookies 
i| 所 有 -| em - e 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" “http://www. w3. org/ TR/xhtml1/DTD/xhtmli-trs 
<html xmins-" http://www. w3. org/1999/xhtml" lang-"zh-CN^» 
<head> 

«meta charset-"UIF-8^» 

«title»3cschool3E S E fg /title» 

«meta name-"keywords / content- w3cschool, HTML, CSS, PHP, DOM, JavaScript, jQuery, XML, AJAX, ASP. NET, W3C, SQL, j 





nok 6€) h m 








- Enahling the SCript panel causes a Firefox slow-down due to a platform bug. This will be fixed with tl 


>>> alert ("w3cschool. cc”) 
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Firebugiz x: Javascript H ;5 


你 可 以 使 用 Firebug 来 生成 日 志 。 
这 有 助 于 我 们 调试 web 页 面 并 发 现 页 面 的 错误 。 
在 Firefox 浏 览 器 中 执行 以 下 代码 : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.o1 
«html» 

«head» 

«meta http-equiv-"Content-Type" content-"text/html; charset=UTF-8": 
<title>Firefox 测 试 页 面 - w3cschool3E &axfe«/title» 


</head> 

<body> 

<script type="text/javascript"> 
var a = "w3cschool"; 

var b = "Ce 


document.write(a,b); 
console.log(a + b); 
</script> 

</body> 

</html> 





使 用 Firefox 浏 览 器 打开 以 上 代码 文件 firefox-test.html, 执 行 结果 及 日 志 记 录 如 下 : 


访问 最 多 O 火狐 官方 站 点 |) 新 手 上 路 Ñ 815603 -JSD.pause .… _) SAMH 国 Ras 


wocschool. cc 


& |< >》 | 三 | -| ees | HTML css B4 DOM 网 络 Cookies 
(e| ṣe Ge mum [Al] SR SS 消息 WEB Cookies 
® Warning: Enabling the Script panel causes a Firefox slow-down due to a platform bug. This will be fixed with the 


w3cschool. cc 
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Firebug 4 $2257 


Firebug 可 以 监控 网 页 中 每 个 文件 加 载 的 时 间 。 


打开 Firebug。 上 点击" 网络 "， 然 后 确定 已 经 启用 ， 重 新 裁 人 当前 页 面 。Firebug 显 示 


如 下 所 示 : 
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W3CSCHOOL.CC 








a qe € > Bl eae HTML css 脚本 DOM | 网 络 | Cookies p 
dc 


清除 ”保持 |[ 全 部 | HTML CSS JavaScript XHR 图 片 插件 媒体 字体 








由 GET www.w3cschool.cc 200 OK w3cschool.cc 
由 GET home.css 1 f w3cschool.cc 
由 GET common.js [ t Modifiec w3cschool.cc 
由 GET jquery.min.js 304 fie w3cschool.cc 
由 GET stat.php?id=55780068 t Modified sii.cnzz.com 
由 GET icon book.gif 3 fie w3cschool.cc 
由 GET icon cut.gif f w3cschool.cc 
由 GET icon  doc.gif 304 Not Modified w3cschool.cc 
由 GET w3c.jpg 304 f w3cschool.cc 


6.9 KB 
OB 
0B 
OB 
OB 
0B 
OB 
OB 
OB 


42.120.45.233:80 |J 53ms 
42.120.45.233:80 
42.120.45.233:80 
42.120.45.233:80 
42.156.140. 11:80 
42.120.45.233:80 
42.120.45.233:80 
42.120.45.233:80 
42.120.45.233:80 
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免责 声明 


W3School 提 供 的 内 容 仅 用 于 培训 。 我 们 不 保证 内 容 的 正确 性 。 通 过 使 用 本 站 内 容 
随 之 而 来 的 风险 与 本 站 无 关 。W3School 简 体 中 文 版 的 所 有 内 容 仅 供 测试 ， 对 任何 
法 律 问题 及 风险 不 承担 任何 责任 。 


